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