vue3封装el-table 功能齐全加注释

以下是一个基本的 Vue3 封装 ElementUI 的 el-table 的示例代码，已经加上了注释，希望能够帮到你：

<template>
  <!-- 使用封装的表格组件 -->
  <my-table :data="tableData" :columns="tableColumns"></my-table>
</template>

<script>
// 引入 ElementUI 的 el-table 组件
import { Table, TableColumn } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default {
  components: {
    // 注册封装的表格组件
    MyTable: {
      components: { Table, TableColumn },
      props: {
        // 表格数据
        data: {
          type: Array,
          required: true,
        },
        // 表格列头配置
        columns: {
          type: Array,
          required: true,
        },
      },
      template: `
        <el-table :data="data">
          <!-- 遍历列头配置，生成表格列 -->
          <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
            <!-- 如果列头配置中有指定 slot-scope 属性，则使用插槽方式渲染 -->
            <template v-if="column.slotScope" slot-scope="scope">
              <slot :name="column.slotScope" :row="scope.row" :column="column"></slot>
            </template>
          </el-table-column>
        </el-table>
      `,
    },
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 22, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
      ],
      tableColumns: [
        // 普通列头
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        { label: '性别', prop: 'gender' },
        // 带有插槽的列头
        {
          label: '操作',
          slotScope: 'default',
          // 插槽内容可以是任意的 HTML，这里以简单的按钮为例
          template: '<el-button size="small">编辑</el-button>',
        },
      ],
    };
  },
};

上述代码中，我们首先引入了 ElementUI 的 el-table 和 el-table-column 组件，然后定义了一个 MyTable 组件，它包含了一个 el-table 组件和若干个 el-table-column 组件，其中表格数据和列头配置通过 props 传入。

在组件模板中，我们使用了 v-for 遍历列头配置，生成对应的 el-table-column 组件，并通过 prop 和 label 属性绑定列头的内容和对应数据的属性名。如果列头配置中有指定 slot-scope 属性，则说明这一列需要自定义渲染，我们在该列的 template 中定义了一个简单的按钮，并通过插槽的方式将其渲染到表格中。

最后，在父组件中使用 MyTable 组件，并将表格数据和列头配置传入即可。

希望以上代码能够帮助到你，如果有需要进一步的解释或其他问题，欢迎追问！