二次封装Element UI Table实现动态列
开发中是否会遇见在一个页面中加载的table的列是不固定的，列名需要根据后台数据而动态加载；so element ui 的table 已经不再满足需求，我们得在他的基础上再次封装
增加 refactor_table.vue 组件
<template>
<el-table :data="tableData"
border
:height="tableHeight"
style=" 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: '编号',
100,
align: 'center'
}]
如果需要操作列需要指定prop为空同时增加operate属性，配置如下
[{
prop: '',
label: '操作',
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: '操作',
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>