打个比方,我目前在设计一个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>
这两种设计方式有啥优劣?
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.