连锁酒店网站方案,o2o网站建设方案,成都神速建站,临沂做网络优化的公司el-table是elementUI中的表格组件#xff0c;在后台把管理系统中#xff0c;也是一个比较常用的组件#xff0c;目前有一个比较好的开源项目ProTable#xff0c;这个项目做的很好#xff0c;集成了搜索#xff0c;表格#xff0c;分页器功能很强大。但在我的实际使用中也…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 :keyindex :labelitem.label :widthitem.widthtemplate #default{ row }el-input classinputBox v-ifitem.type txt v-modelrow[item.prop] //template
/el-table-column似乎这样就封装好了一个表格组件但是实际使用中一点代码提示都没有,我们根本不知道需要组件预留的方法我们似乎都没怎么使用到TS因此我们来改造一下代码为config添加一个config配置文件
type Type txt | tag;export interface TableColumnsU {type: Type;prop: keyof U;label: string;width?: number;
}export interface TableConfigTestT {columns: TableColumnsT[];
}在这个配置文件中声明了两个TS接口明确columns该怎么写并且需要接收一个参数将来使用组件时将tabledata的类型接口传进来就会自动解析prop使用keyof实现keyof 是 TypeScript 中的一个关键字用于获取某个类型的所有属性名组成的联合类型。
现在来重写一下congig使用类型断言缩小config的类型
config: {type: Object as PropTypeTableConfigTestObject | any,default: () ({})}这样我们就完成组件的第一个需求定制化。
表格操作列
因为我只需要一个删除行的操作所以这里使用了一个简单的方法就是在组件中直接书写操作
el-table-column fixedright label操作 width120template #default{ row }el-button typedanger iconel-icon-delete clickdeleteRow(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 :configtableConfigEdu :datatableDataEdu :bordertrue /
script setup langts
interface TableDataTrain {startDate: string;endDate: string;address: string;content: string;
}
const tableConfigTrain refTableConfigTestTableDataTrain({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 refTableDataTrain[]([{ startDate: , endDate: , address: , content: }]);
/script封装组件是为了更好的工作随着工作的需求增加会不断增加组件的功能同时也会更新文档。
gitee仓库
