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

一、效果图

二、封装两个组件，分别为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>