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

[sundev]

打个比方，我目前在设计一个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>

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

[66beta]

从实际业务出发吧，第一种是 slot 方式，比较灵活，也就是说它支持多种表格展示方式

第二种就比较固定了，只传对应格式的数据进去

[sundev]

@66beta 之前写 react，所以比较喜欢第一种方式，但是如果用这种，那么需要在组件内部对 slot 进行解析，感觉比较麻烦！

[jydeng]

可以两种结合