赋能表格自定义：二次封装 Element Plus 的 El-Table

前端

2023-12-25 01:29:37

二次封装 Element Plus 的 El-Table 组件，实现表格自定义列

自定义表格列的必要性

在开发 Web 应用程序时，我们经常需要处理表格数据。Element Plus 提供了出色的 El-Table 组件，但它并不能直接满足自定义表格列的需求。因此，二次封装 El-Table 组件成为一种必要手段。

二次封装的考量因素

在二次封装之前，我们必须考虑以下因素：

封装粒度： 只封装 El-Table 组件还是连同子组件？
封装方式： 直接修改 El-Table 源码还是采用组合方式？
封装扩展性： 封装后的组件是否具有良好的扩展性，以支持后续二次开发？

二次封装的实现

权衡利弊后，我们决定采用组合方式，只封装 El-Table 组件，而子组件通过插槽引入。这种方式既能保证封装粒度，又能保持组件的扩展性。

具体实现如下：

import { defineComponent } from 'vue';
import ElTable from 'element-plus/es/components/table/src/table.vue';
import MyTableHeader from './my-table-header.vue';
import MyTableFooter from './my-table-footer.vue';

export default defineComponent({
  name: 'MyTable',
  components: { ElTable, MyTableHeader, MyTableFooter },
  props: {
    // ...
  },
  setup(props, { slots }) {
    return () => (
      <el-table {...props}>
        { slots.header ? slots.header() : <my-table-header /> }
        { slots.footer ? slots.footer() : <my-table-footer /> }
      </el-table>
    );
  },
});

自定义表格列

通过封装后的组件，我们可以轻松实现自定义表格列的功能：

import { ref } from 'vue';

export default defineComponent({
  name: 'MyTable',
  // ...
  setup() {
    const columns = ref([
      {
        prop: 'name',
        label: '姓名',
      },
      {
        prop: 'age',
        label: '年龄',
      },
    ]);

    return {
      columns,
    };
  },
});