sundev
V2EX  ›  Vue.js

新接触 vue,关于 Vue 组件设计的一些疑问

  •  
  •   sundev · Apr 10, 2019 · 3193 views
    This topic created in 2643 days ago, the information mentioned may be changed or developed.

    打个比方,我目前在设计一个table组件,现在要向里面传递column信息, 目前看到两种方案: 第一种是vue element方式,通过el-table-column标签向table组件传递信息,如下:

    <el-table
        :data="tableData"
        style="width: 100%"
        max-height="250">
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
      </el-table>
    

    第二种是vue-easytable方式,通过 props 的方式传递列数据,如下:

    <template>
       <v-table :columns="columns"></v-table>
    </template>
    
    <script>
        export default{
            data(){
                return {
                    multipleSort: false,
                    tableData: [ ... ],
                    columns: [
                        {field: 'email', width: 230, columnAlign: 'center'},
                        {field: 'address', width: 330, columnAlign: 'left'}
                    ],
                    titleRows: [
                        {fields: ['email'], title: '111', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
                        {fields: ['address'], title: '333', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'}]
                    ]
                }
            }
        }
    </script>
    

    这两种设计方式有啥优劣?

    3 replies    2019-04-10 13:07:33 +08:00
    66beta
        1
    66beta  
       Apr 10, 2019 via Android   ❤️ 1
    从实际业务出发吧,第一种是 slot 方式,比较灵活,也就是说它支持多种表格展示方式

    第二种就比较固定了,只传对应格式的数据进去
    sundev
        2
    sundev  
    OP
       Apr 10, 2019
    @66beta 之前写 react,所以比较喜欢第一种方式,但是如果用这种,那么需要在组件内部对 slot 进行解析,感觉比较麻烦!
    jydeng
        3
    jydeng  
       Apr 10, 2019   ❤️ 1
    可以两种结合
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   6046 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 78ms · UTC 03:07 · PVG 11:07 · LAX 20:07 · JFK 23:07
    ♥ Do have faith in what you're doing.