element UI 实现 递归渲染表头

场景： 表格 表头数据由后端提供数据，模板需要一层一层循环嵌套，就像递归一样渲染出模板
如图

3321958-b1989052443b33ab.png

表头数据： tableConfig

[{
    "label": "2019年1月xxx资表",
    "prop": "",
    "children": [{
        "label": "表1",
        "prop": "c_0"
    }, {
        "label": "表2",
        "prop": "c_1",
        "children": []
    }, {
        "label": "表3",
        "prop": "c_2",
        "children": [{
            "label": "表4",
            "prop": "c_3",
            "children": []
        },{
            "label": "表5",
            "prop": "c_4",
            "children": []
        }]
    }]
}]

表格数据 tableData

[{
    c_0:'c_0',
    c_1:'c_1',
    c_2:'c_2',
    c_3:'c_3',
    c_4:'c_4'
},
{
    c_0:'a_0',
    c_1:'a_1',
    c_2:'a_2',
    c_3:'a_3',
    c_4:'a_4'
}]

使用的页面

<template>
   <dynamic-table :table-data="tableData" :table-header="tableConfig" v-if="dynamicTableShow"></dynamic-table>
</template>
<script>
import dynamicTable from '@/components/dynamicTable/dynamicTable'
const tableData =[{
    c_0:'c_0',
    c_1:'c_1',
    c_2:'c_2',
    c_3:'c_3',
    c_4:'c_4'
},
{
    c_0:'a_0',
    c_1:'a_1',
    c_2:'a_2',
    c_3:'a_3',
    c_4:'a_4'
}]
const tableConfig = [{
    "label": "2019年1月xxx资表",
    "prop": "",
    "children": [{
        "label": "表1",
        "prop": "c_0"
    }, {
        "label": "表2",
        "prop": "c_1",
        "children": []
    }, {
        "label": "表3",
        "prop": "c_2",
        "children": [{
            "label": "表4",
            "prop": "c_3",
            "children": []
        },{
            "label": "表5",
            "prop": "c_4",
            "children": []
        }]
    }]
}]
export default {
    components: {
        dynamicTable
    },
    data () {
        return{
            dynamicTableShow: true, // 使得DynamicTable组件重新渲染变量
            // 表数据
            tableData: tableData,
            // 表头数据
            tableConfig: tableConfig
        }
        
    },
    created(){
        this.getHead()
    },
    methods:{
        getHead(){
            //请求接口后赋值
            this.tableConfig = tableConfig;
            this.handleServiceCategoryChange();
            this.tableData = tableData;
        },
        // 服务类型改变的时候，需要重新请求表头信息和表格数据
        handleServiceCategoryChange () {
            // 设置dynamicTableShow为false，使得DynamicTable组件重新渲染
            this.dynamicTableShow = false
            // 此处是DOM还没有更新，此处的代码是必须的
            this.$nextTick(() => {
                // DOM 现在更新了
                this.dynamicTableShow = true
            })
        }
    }
}
</script>

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>
<script>
export default {
  name: 'tableColumn',
  props: {
    coloumnHeader: {
      type: Object,
      required: true
    }
  }
}
</script>

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
    }
  },
  components: {
    tableColumn
  }
}
</script>

源码主要来源 :https://www.cnblogs.com/llcdxh/p/9473458.html