element ui 的多级表头的动态生成
小鱼：老大，咱们这个表格需求有点复杂啊，表头还要动态生成，还是多级的！这咋整？
老大：别慌，Element UI 的 el-table 了解一下？它可是表格界的“瑞士军刀”，多级表头小菜一碟！
小鱼：哦？怎么搞？
老大：后端给你返回的表头配置，是不是像这样？
[
{
"label": "一级表头",
"children": [
{ "label": "二级表头1", "prop": "field1" },
{ "label": "二级表头2", "prop": "field2" }
]
}
]
小鱼：对对对，就是这个！
老大：简单！写个递归组件 RecursiveColumn，遍历这个配置。如果表头有 children，就递归渲染子表头；没有就直接渲染普通列。就像俄罗斯套娃，一层套一层！
小鱼：那数据怎么对齐？还要支持排序呢！
老大：数据靠右？加个 align: 'right'，立马整整齐齐！排序？sortable: true 一开，点一下表头，数据乖乖排队！
小鱼：哈哈，懂了！这就去写，争取让表格比我的发型还整齐！
老大：加油！记得测试，别让表格变成“秃头表”就行！
1.需封装两个组件一个为DynamicTable.vue和TableColumn.vue(主要是使用递归来对表头进行循环生成)
DynamicTable.vue
<template>
<el-table :data="tableData" border :header-cell-style="headerStyle" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="areaCode" lazy :load="load">
<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 + 'else'" :label="item.label" :prop="item.prop"
align="center" :min-width="item.width ? item.width : '200px'"></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
},
// @Description: 设置表头样式
headerStyle: {
type: Object,
default: () => {
return {
background: '#fff',
fontSize: '14px',
fontFamily: 'AlibabaPuHuiTi_2_85_Bold',
color: '#222222'
}
}
}
},
components: {
TableColumn
},
methods: {
load(tree, treeNode, resolve) {
this.$emit('load', tree, treeNode, resolve)
},
}
}
</script>
<style scoped></style>
TableColumn.vue
<template>
<el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label" show-overflow-tooltip 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>
2.组件使用方式
<template>
<DynamicTable :table-data="tableData" :table-header="tableConfig" v-if="dynamicTableShow"></DynamicTable>
</template>
<script>
import DynamicTable from '@/components/DynamicTable'
export default {
// 分地区披露统计
name: 'areaStatistics',
components: {
DynamicTable
},
data() {
return {
dynamicTableShow: true,
// 表头数据
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'
}
]
}
]
}
],
tableData: [
{
districtName: '1',
timeDimension: '2',
residentPopNum: '3',
residentPopDst: '4',
liveLandArea: '5',
liveLandDst: '6',
employmentLandArea: '7',
employmentLandDst: '8'
}
],
}
},
methods: {
changeselect() {
this.dynamicTableShow = false // 将表格组件进行销毁
this.tableConfig = [
{
id: 100,
label: '半年度表头',
prop: '',
children: [
{
id: 110,
label: '半年度表头1',
prop: 'districtName'
},
{
id: 120,
label: '半年度表头2',
prop: 'timeDimension'
}
]
}
]
this.$nextTick(() => {
this.dynamicTableShow = true
})
}
}
}
</script>
<style lang="scss" scoped></style>
(www.cnblogs.com/llcdxh/p/94… "参考网站")
