vue+element实现动态表格：根据后台返回的属性名和字段动态生成表头可变表格
由于项目需求，需要有一个动态表格，可以根据配置或从后台获取表格属性列。并加上了某一行需要点击跳转和操作列里面的功能
子组件中的table封装，并接受父组件传递过来的数据
<el-table:data="tableData"id="el-table"style="width: 100%":header-cell-style="headerCellStyle":cell-style="cellStyle"><!-- 是否显示序列号 --><template v-if="indexColumn"><el-table-columntype="index"width="50"></el-table-column></template><!-- 动态循环的列表 --><el-table-columnv-for="(item, index) in tableLabel":key="index":prop="item.prop":label="item.label":width="item.width ? item.width : ''":align="'left'":show-overflow-tooltip="true"><template slot-scope="scope"><el-buttonv-if="item.isJump"type="text"size="small":key="index"@click="details(scope.row)">{{ scope.row[item.prop] }}</el-button><span v-else>{{ scope.row[item.prop] }}</span></template></el-table-column><!-- 固定行 操作 --><template><el-table-columnv-if="tableOption":width="tableOption.width":label="tableOption.label"fixed="right"><template slot-scope="scope"><el-buttontype="text"size="small"v-for="(item, index) in tableOption.options":key="index"@click="item.handle(scope.row)">{{ item.label }}</el-button></template></el-table-column></template></el-table>
接受父组件的传值
props: {// 数据源tableData: {type: Array,default () {return []}},// 标题tableLabel: {type: Array,default () {return []}},// 处理常用查看,编辑tableOption: {type: Object,default () {return {}}},// 是否显示 序号indexColumn: {type: Boolean,default: () => { }}},
子组件向父组件发起调用
// 改变默认样式headerCellStyle ({ row, rowIndex }) {return 'padding:5px 0'},// 改变默认样式cellStyle ({ row, column, rowIndex, columnIndex }) {return 'padding:5px 0'},// 点击可操作行 向父组件发起调用details (row) {this.$emit('cellClick', row)}
父组件
<Table:table-data="tableData":table-label="tableLabel":table-option="tableOption":selection-checked="false":index-column="true"ref="Table"@cellClick="tableCellClick"></Table>
父组件向子组件传递的参数
tableData: [{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}],tableOption: {label: '操作',width: '180',options: [{label: '添加',type: 'primary',fixed: 'right',handle: (row) => {this.add(row)}}]},tableLabel: [{ label: '日期', prop: 'date', width: '', isJump: true },{ label: '姓名', prop: 'name', width: '' },{ label: '地址', prop: 'address', width: '' },]
父组件调用方法
add(row) {console.log(row)},tableCellClick (row) {console.log(row)}
