二次封装Element UI Table实现动态列

开发中是否会遇见在一个页面中加载的table的列是不固定的，列名需要根据后台数据而动态加载；so element ui 的table 已经不再满足需求，我们得在他的基础上再次封装

增加 refactor_table.vue 组件

<template> <el-table :data="tableData" border :height="tableHeight" style="width: 100%" v-loading="tableLoading" :size="tableSize" > <el-table-column v-for="(th, key) in tableColumnsConfig" :key="key" :prop="th.prop" :label="th.label" :fixed="th.fixed" :width="th.width" :align="th.align" show-overflow-tooltip="true"> <template slot-scope="scope"> <div v-if="th.prop==''"> <el-button v-for="(btn,index) in th.operate" type="text" size="small" :key="index" :style="btn.type=='del'?'color:#ff3e3e' : ''" @click="btnHandle(scope.row,btn.type)"> {{btn.name}} </el-button> </div> <div v-else> <span>{{ scope.row[th.prop] }}</span> </div> </template> </el-table-column> </el-table> </template> <script> export default { name: 'refactor_table', props: { /** * table 渲染所需数据 * 如：[{id:1,name:'abc'},{id:2,name:'def'}] */ tableData: { type: Array, default: function () { return [] } }, /** * 设置table 加载icon */ tableLoading: { type: Boolean, default: false }, /** * 设置table 高度 */ tableHeight: { type: Number }, /** * 设置table 大小（medium / small / mini） */ tableSize:{ type:String }, /** * table 的column 相关配置信息 * 如：[{ * prop: 'id', label: '编号', width: 100, align: 'center' }] 如果需要操作列需要指定prop为空同时增加operate属性，配置如下 [{ prop: '', label: '操作', width: 280, align: 'center', operate:[ { type:'del', name:'删除', }, { type:'add', name:'新增', } ]] */ tableColumnsConfig: { type: Array, default: function () { return [] } } }, methods: { btnHandle(row, type) { this.$emit("operateHandle", row, type) } } } </script>

在main.ve中调用

<template> <div> <refactor-table :table-data="tableData" :table-columns-config="tableColumns" :table-loading="loading" :tableSize="tableSize" @operateHandle="tableOperateHandle" ></refactor-table> </div> </template> <script type="text/ecmascript-6"> import RefactorTable from '@/components/refactor_table'; export default { data() { return { tableHeight: 300, tableData: [], tableColumns: [], tableSize: 'mini' } }, created() { this.loadingTable(); }, methods: { loadingTable() { // 初始化table 数据 this.tableData = [ {id: '1938238', name: '节点', grade: 'ERWFD'}, {id: '3241', name: '节点B', grade: 'FDD'}, {id: '8238', name: '节点C', grade: 'FVDFA'}, {id: '3424', name: '节点', grade: 'ERWFD'}, {id: '32ree', name: '节点B', grade: 'FDD'}, {id: '821221', name: '节点C', grade: 'FVDFA'}, {id: '89238', name: '节点', grade: 'ERWFD'}, {id: '323432', name: '节点B', grade: 'FDD'}, {id: '2231545', name: '节点C', grade: 'FVDFA'}, {id: '213435', name: '节点C', grade: 'FVDFA'} ]; // 初始化 table columns for(let key in this.tableData[0]){ this.tableColumns.push({ prop: key, label: key, align: 'center' }); } // 最后增加一列为操作 this.tableColumns.push( { prop: '', label: '操作', width: 280, align: 'center', operate:[ { type:'del', name:'删除', }, { type:'add', name:'新增', } ]}); }, /** * 接收table 组件操作时传入的参数 * @param row {object} 所选行 * @param type {String} 操作类型（add,del） */ tableOperateHandle(row,type){ console.log(row,type) } }, components: { RefactorTable } } </script>

运行预览