el-table是elementUI中的表格组件，在后台把管理系统中，也是一个比较常用的组件，目前有一个比较好的开源项目ProTable，这个项目做的很好，集成了搜索，表格，分页器功能很强大。但在我的实际使用中也有一些需要更改的地方，因此，我也尝试着封装自己的table组件。

需求

  • 定制化：这是最基本的要求，每个表格的表头都是不一样的，封装table组件，首先就要满足它的定制化输入。
  • 表格操作列
  • 末尾添加一行

制作

定制化

让用户能够自定义配置列表项

思路

父子通信，将父组件配置好的columns传递给子组件，然后使用v-for遍历生成表格cell。

实现

首先我们需要在父组件得到传递过来的参数，使用defineProps接收

const props = defineProps({data: {type: Array,default: () => []},config: {type: Object,default: () => ({})}}）

在这里data的就是将来我们接收tabledata的，config则用来接收columns配置
将接收到的数据进行渲染

<el-table-column v-for="(item, index) in config.columns" :key="index":label="item.label" :width="item.width"><template #default="{ row }"><el-input class="inputBox" v-if="item.type === 'txt'" v-model="row[item.prop]" /></template></el-table-column>

似乎这样，就封装好了一个表格组件，但是实际使用中一点代码提示都没有,我们根本不知道需要组件预留的方法，我们似乎都没怎么使用到TS，因此我们来改造一下代码，为config添加一个config配置文件

type Type = "txt" | "tag";export interface TableColumns<U> {type: Type;prop: keyof U;label: string;width?: number;}export interface TableConfigTest<T> {columns: TableColumns<T>[];}

在这个配置文件中声明了两个TS接口，明确columns该怎么写，并且需要接收一个参数，将来使用组件时，将tabledata的类型接口传进来，就会自动解析prop（使用keyof实现，keyof 是 TypeScript 中的一个关键字，用于获取某个类型的所有属性名组成的联合类型）。

现在来重写一下congig，使用类型断言缩小config的类型

config: {type: Object as PropType<TableConfigTest<Object | any>>,default: () => ({})}

这样我们就完成组件的第一个需求，定制化。

表格操作列

因为我只需要一个删除行的操作，所以这里使用了一个简单的方法，就是在组件中直接书写操作

<el-table-column fixed="right" label="操作" width="120"><template #default="{ row }"><el-button type="danger" icon="el-icon-delete" @click="deleteRow(row)"> 删除 </el-button></template></el-table-column>

然后将删除方法实现

const deleteRow = (row: any) => {const index = props.data.indexOf(row);if (index > -1) {props.data.splice(index, 1);}};

使用演示

<MyTable :config="tableConfigEdu" :data="tableDataEdu" :border="true" /><script setup lang="ts">interface TableDataTrain {startDate: string;endDate: string;address: string;content: string;}const tableConfigTrain = ref<TableConfigTest<TableDataTrain>>({columns: [{type: "txt",prop: "startDate",label: "开始日期",width: 200},{type: "txt",prop: "endDate",label: "截止日期",width: 200},{type: "txt",prop: "address",label: "地点"},{type: "txt",prop: "content",label: "内容"}]});const tableDataTrain = ref<TableDataTrain[]>([{ startDate: "", endDate: "", address: "", content: "" }]);</script>

封装组件是为了更好的工作，随着工作的需求增加，会不断增加组件的功能，同时也会更新文档。

gitee仓库