一、介绍
背景:
基于 elementui admin pro 版本框架,组件库版本2.15.13
目的:
基于以上实现table组件的二次封装,使其使用更加方便,减少代码量,提高复用性
总的来说就是把table的表头改成动态数据渲染,调用的时候将表头数据和表格数据传给ExTable子组件渲染, 不用一行一行的写el-table-column,每列都可以自定义需要的参数还是很方便的,另外还可以加上分页,加上自定义组件 根据render修改列数据展示内容
二、步骤解析
官方代码大家可以去elementui官方组件库
- 创建ExTable.vue组件,创建数据文件formData.js文件。
- 在ExTable.vue中添加table组件改造代码
- ExTable.vue表格需要的表头数据
三、代码详情
ExTable.vue代码(不含样式):
<el-table
:data="tableData"
border
stripe
style="width: 98%;margin-top:10px;"
>
<el-table-column
v-for="(item, index) in userData"
:key="index"
:type="item.type || ''"
:prop=