ElementUI 封装 Table 组件：简洁高效，提升开发效率

引言

ElementUI 作为一款流行的前端 UI 框架，为开发者提供了丰富的组件库。Table 组件是其中不可或缺的一部分，用于展示和操作表格数据。然而，在实际开发中，对 Table 组件进行定制和封装往往会耗费大量时间和精力。本文将探讨如何封装 ElementUI 的 Table 组件，以简化开发流程，提高代码复用性和可维护性。

一、封装组件

封装组件的第一步是创建组件文件。在本例中，我们创建一个名为 MyTable.vue 的组件文件，并引入必要的依赖：

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

<script>
import { defineComponent } from 'vue';
import { ElTable } from 'element-ui';

export default defineComponent({
  components: { ElTable },
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    tableColumns: {
      type: Array,
      required: true,
    },
  },
});
</script>

<style scoped>
  /* 组件样式 */
</style>

在组件中，我们通过 props 传入 tableData（表格数据）和 tableColumns（表格列定义）两个属性。这些属性是组件与父组件通信的桥梁，允许父组件控制表格的数据和结构。

二、组件传值

在父组件中，我们可以使用 MyTable 组件并通过 props 传递数据和列定义：

<MyTable :tableData="tableData" :tableColumns="tableColumns" />

通过 props 传值的方式，子组件可以获得父组件传递的数据，从而动态渲染表格。这使得组件具有更好的灵活性，可以根据不同的数据源和列定义展示不同的表格。

三、数据绑定

为了使表格数据与组件内部状态保持同步，我们需要在组件中使用 v-model 指令进行数据绑定。我们修改 MyTable.vue 组件中的代码：

<template>
  <el-table :data="tableData" :columns="tableColumns" v-model="selectedRows" />
</template>

<script>
import { defineComponent } from 'vue';
import { ElTable } from 'element-ui';

export default defineComponent({
  components: { ElTable },
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    tableColumns: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      selectedRows: [],
    };
  },
});
</script>

通过 v-model 指令，我们可以双向绑定表格中的选中行数据。当用户在表格中选择或取消选择行时，selectedRows 数组中的数据也会相应更新。这使我们能够轻松地跟踪用户在表格中的操作，并相应地进行业务逻辑处理。

四、样式定制

为了定制组件的样式，我们需要在 MyTable.vue 组件的