vue3 element-plus表格封装

Vue3 Element Plus是一个基于Element UI的增强版本，它提供了丰富的组件库，包括表格(Table)。对表格进行封装在Vue项目中通常是为了提高代码复用性和管理复杂性。以下是基本的步骤：

1. 引入依赖：首先，你需要安装`element-plus`和相关的样式文件到你的Vue项目中。

npm install element-plus @vue/cli-plugin-element-plus --save

2. 定义组件：创建一个自定义的表格组件，比如`CustomTable.vue`，并导入Element Plus的`el-table`和可能需要的其他表头、行等元素。

<template>
  <el-table :data="tableData" :columns="columns">
    <!-- 表格内容 -->
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-plus';

export default {
  components: {
    ElTable,
    // 如果有列模板，可以添加对应的列组件
    ColumnTemplateComponent: () => import('./ColumnTemplate.vue'),
  },
  data() {
    return {
      tableData: [], // 样例数据
      columns: [
        { prop: 'name', label: '姓名' }, // 列配置
        { prop: 'age', label: '年龄' },
        // 更复杂的列配置...
      ],
    };
  },
};
</script>

3. 配置和扩展：你可以根据需求扩展表格功能，如排序、分页、搜索过滤等，并在组件内部提供公共的API供外部调用。

4. 使用组件：在其他组件中使用新封装的`CustomTable`，传入实际的数据和配置。

<custom-table :data="myData" :columns="myColumns"></custom-table>