在Vue 3和TypeScript中对Element Plus的Table组件进行二次封装，可以通过创建一个自定义组件来实现。以下是一个简单的示例：
- 创建一个新的组件文件
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>- 使用
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来配置表格的列和数据。