vue3 + ts element Plus table组件二次封装

在Vue 3和TypeScript中对Element Plus的Table组件进行二次封装，可以通过创建一个自定义组件来实现。以下是一个简单的示例：

1. 创建一个新的组件文件 MyTable.vue:

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    ></el-table-column>
  </el-table>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import type { TableColumn } from 'element-plus';
 
export default defineComponent({
  name: 'MyTable',
  props: {
    columns: {
      type: Array as () => TableColumn[],
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }
  }
});
</script>

2. 使用 MyTable 组件时，需要传递 columns 和 tableData 属性：

<template>
  <MyTable :columns="tableColumns" :tableData="tableData" />
</template>
 
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import MyTable from './MyTable.vue';
 
export default defineComponent({
  components: {
    MyTable
  },
  setup() {
    const tableData = reactive([
      { date: '2016-05-02', name: 'Tom', address: 'No.189, Grove St, Los Angeles' },
      // ...更多数据
    ]);
 
    const tableColumns = reactive([
      { label: '日期', prop: 'date' },
      { label: '姓名', prop: 'name' },
      { label: '地址', prop: 'address' }
    ]);
 
    return {
      tableData,
      tableColumns
    };
  }
});
</script>

在这个例子中，MyTable 组件接受两个props：columns 和 tableData。columns 是一个由 TableColumn 对象组成的数组，用于定义表格的列；tableData 是表格要展示的数据数组。在父组件中，你可以通过传递这些props来配置表格的列和数据。