拒绝！封装el-table，请别再用JSON数组来配置列了🐶

如今，Vue.js是许多前端开发人员的首选框架，而Element UI则是Vue.js中广泛使用的UI组件库。El-table作为Element UI中最重要的组件之一，提供了强大的表格功能。我们经常会遇到需要封装el-table的情况，以便在不同的场景中复用。封装el-table时，通常会有两种选择：使用插槽写法或通过JSON数组来配置列。那么，哪种方式更好呢？

插槽写法

插槽写法是一种通过HTML标签来定义列的结构和内容的方式。例如：

<el-table :data="tableData">
  <el-table-column prop="name">
    <template slot-scope="scope">
      {{ scope.row.name }}
    </template>
  </el-table-column>
  <el-table-column prop="age">
    <template slot-scope="scope">
      {{ scope.row.age }}
    </template>
  </el-table-column>
</el-table>

插槽写法的优点在于代码结构清晰，可读性强，而且可以轻松地实现复杂的列结构和内容。然而，插槽写法也有一个缺点，那就是代码量会比较多，尤其是当列数较多时。

通过JSON数组来配置列

通过JSON数组来配置列是一种通过JavaScript对象来定义列的结构和内容的方式。例如：

const tableData = [
  {
    name: 'John Doe',
    age: 30
  },
  {
    name: 'Jane Doe',
    age: 25
  }
];

const tableColumns = [
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄'
  }
];

<el-table :data="tableData" :columns="tableColumns"></el-table>

通过JSON数组来配置列的优点在于代码量少，而且可以轻松地动态地改变列的结构和内容。然而，通过JSON数组来配置列也有一个缺点，那就是代码的可读性会比较差，尤其是当列数较多时。

哪种方式更好？

那么，哪种方式更好呢？其实，这两种方式各有优缺点，没有绝对的好坏之分。在实际开发中，我们可以根据具体情况来选择使用哪种方式。如果列数较少，而且列的结构和内容比较简单，那么可以使用插槽写法。如果列数较多，而且列的结构和内容比较复杂，那么可以使用通过JSON数组来配置列的方式。

封装el-table的建议

在封装el-table时，我们建议使用插槽写法。因为插槽写法具有以下优点：

• 代码结构清晰，可读性强
• 容易实现复杂的列结构和内容
• 可以轻松地通过插槽自定义列的内容

通过JSON数组配置列的必要性和更好的方式

通过JSON数组来配置列有时候也是必要的，例如：

• 当需要动态地改变列的结构和内容时
• 当需要在不同的场景中复用el-table时

如果必须使用通过JSON数组来配置列的方式，那么我们可以使用以下方法来提高代码的可读性：

• 使用注释来解释每个列的含义
• 使用命名规范来命名列的属性
• 使用JSON字符串格式化工具来格式化JSON字符串

总之，在封装el-table时，我们建议使用插槽写法。只有在必要的情况下，才使用通过JSON数组来配置列的方式。而且，在使用通过JSON数组来配置列的方式时，我们应该注意提高代码的可读性。