一、效果图

element UI实现动态生成多级表头-LMLPHP

element UI实现动态生成多级表头-LMLPHP

二、封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成

DynamicTable.vue

 <template>
<el-table :data="tableData" border :height="height">
<template v-for="item in tableHeader">
<table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></table-column>
<el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center"></el-table-column>
</template>
</el-table>
</template> <script>
import TableColumn from './TableColumn'
export default {
props: {
// 表格的数据
tableData: {
type: Array,
required: true
},
// 多级表头的数据
tableHeader: {
type: Array,
required: true
},
// 表格的高度
height: {
type: String,
default: '300'
}
},
components: {
TableColumn
}
}
</script> <style scoped> </style>

TableColumn.vue

<template>
<el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label" align="center">
<template v-for="item in coloumnHeader.children">
<tableColumn v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></tableColumn>
<el-table-column v-else :key="item.name" :label="item.label" :prop="item.prop" align="center"></el-table-column>
</template>
</el-table-column>
</template> <script>
export default {
name: 'tableColumn',
props: {
coloumnHeader: {
type: Object,
required: true
}
}
}
</script> <style scoped> </style>

三、使用

HTML代码

     <div class="result-wrapper">
<dynamic-table :table-data="tableData" :table-header="tableConfig" v-if="dynamicTableShow"></dynamic-table>
<dynamic-form v-else></dynamic-form>
</div>

JS代码

 <script>
import DynamicTable from './components/DynamicTable'
export default {
components: {
DynamicTable
},
data () {
return {
searchForm: {
month: getMonth(),
serviceCategory: '1'
},
dynamicTableShow: true, // 使得DynamicTable组件重新渲染变量
// 表数据
tableData: [
{
districtName: '1',
timeDimension: '2',
residentPopNum: '3',
residentPopDst: '4',
liveLandArea: '5',
liveLandDst: '6',
employmentLandArea: '7',
employmentLandDst: '8'
}
],
// 表头数据
tableConfig: [
{
id: 100,
label: '一级表头',
prop: '',
children: [
{
id: 110,
label: '二级表头1',
prop: 'districtName'
},
{
id: 120,
label: '二级表头2',
prop: 'timeDimension'
}
]
},
{
id: 200,
label: '一级表头1',
prop: '',
children: [
{
id: 210,
label: '二级表头2',
prop: '',
children: [
{
id: 211,
label: '三级表头3',
prop: 'residentPopNum'
},
{
id: 212,
label: '三级表头',
prop: 'residentPopDst'
}
]
}
]
},
{
id: 300,
label: '一级表头1',
prop: '',
children: [
{
id: 310,
label: '二级表头2',
prop: '',
children: [
{
id: 311,
label: '三级表头3',
prop: 'liveLandArea'
},
{
id: 312,
label: '三级表头3',
prop: 'liveLandDst'
}
]
},
{
id: 320,
label: '二级表头1',
prop: '',
children: [
{
id: 321,
label: '三级表头3',
prop: 'employmentLandArea'
},
{
id: 322,
label: '三级表头3',
prop: 'employmentLandDst'
}
]
}
]
}
]
}
},
methods: {
// 服务类型改变的时候,需要重新请求表头信息和表格数据
handleServiceCategoryChange (val) {
// 设置dynamicTableShow为false,使得DynamicTable组件重新渲染
this.dynamicTableShow = false
if (val === '1') {
this.tableData = [
{
districtName: '1',
timeDimension: '2',
residentPopNum: '3',
residentPopDst: '4',
liveLandArea: '5',
liveLandDst: '6',
employmentLandArea: '7',
employmentLandDst: '8'
}
]
this.tableConfig = [
{
id: 100,
label: '一级表头',
prop: '',
children: [
{
id: 110,
label: '二级表头1',
prop: 'districtName'
},
{
id: 120,
label: '二级表头2',
prop: 'timeDimension'
}
]
},
{
id: 200,
label: '一级表头1',
prop: '',
children: [
{
id: 210,
label: '二级表头2',
prop: '',
children: [
{
id: 211,
label: '三级表头3',
prop: 'residentPopNum'
},
{
id: 212,
label: '三级表头',
prop: 'residentPopDst'
}
]
}
]
},
{
id: 300,
label: '一级表头1',
prop: '',
children: [
{
id: 310,
label: '二级表头2',
prop: '',
children: [
{
id: 311,
label: '三级表头3',
prop: 'liveLandArea'
},
{
id: 312,
label: '三级表头3',
prop: 'liveLandDst'
}
]
},
{
id: 320,
label: '二级表头1',
prop: '',
children: [
{
id: 321,
label: '三级表头3',
prop: 'employmentLandArea'
},
{
id: 322,
label: '三级表头3',
prop: 'employmentLandDst'
}
]
}
]
}
]
} else {
this.tableData = [
{
districtName: '111',
timeDimension: '222'
}
]
this.tableConfig = [
{
id: 100,
label: '一级表头',
prop: '',
children: [
{
id: 110,
label: '二级表头1',
prop: 'districtName'
},
{
id: 120,
label: '二级表头2',
prop: 'timeDimension'
}
]
}
]
}
// 此处是DOM还没有更新,此处的代码是必须的
this.$nextTick(() => {
// DOM 现在更新了
this.dynamicTableShow = true
})
}
}
}
</script> <style scoped>
.policy-wrapper{
margin-top: 10px;
}
.result-wrapper{
margin-top: 22px;
}
</style>
05-22 17:28
查看更多