element ui 的多级表头的动态生成

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>

参考网站https://www.cnblogs.com/llcdxh/p/9473458.html