一、elemenetUI二级表头动态渲染
-
接到需求写一个要做一个如图所示的表格，要求数据表头动态加载；
开始拿到这个需求，对我一个后端开发人员来说还是有点难度，百度到一些多级表头渲染的，但是对后端传来的格式要求太多，耗费的精力也太多；
最后参考百度的一篇博客终于成功渲染，废话不多说，直接上代码；
-
后端需要传来的数据格式
“listOut”: [
{
custNo: '1111',
aList: [
{
amountDescription: '一般', //一级表头
amountList: [
{drCrInd: "流入笔数", count: 6}, //{二级表头，列对应的值}
{drCrInd: "流出笔数", count: 1}
]
},
{
amountDescription: '紧急',
amountList: [
{drCrInd: "流入笔数", count: 8},
{drCrInd: "流出笔数", count: 1}
]
}
]
},
{
custNo: '2222',
aList: [
{
amountDescription: '一般',
amountList: [
{drCrInd: "流入笔数", count: 10},
{drCrInd: "流出笔数", count: 1}
]
},
{
amountDescription: '紧急',
amountList: [
{drCrInd: "流入笔数", count: 5},
{drCrInd: "流出笔数", count: 1}
]
}
]
}
];
这种格式对后端开发来说，很简单，但是前端怎么去渲染呢，动态加载肯定得用到v-for,只有这样才能做到动态渲染：
- 前端代码
<template>
<div>
<el-table v-loading="loading" :data="tableData" border style=" 100%" row-key="id" stripe>
<el-table-column align="center" fixed prop="custNo" label="客户号" />
<el-table-column v-for="(planItem, index) in aList" :key="index" align="center" :label="planItem.amountDescription">
<el-table-column v-for="(stageItem, indexChild) in planItem.amountList" :key="index+'-'+indexChild" align="center" :label="stageItem.drCrInd">
<template slot-scope="scope">
{{ scope.row.aList[index].amountList[indexChild].count}}
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "FormTest",
data() {
return {
loading: false,
// 表格组件 列表数据对象
tableData: [],
aList: [],
};
},
created() {
this.search();
},
methods: {
search(title) {
this.$axios({
method: 'post',
url: Api.getTranMgData,
}).then((res) => {
this.tableData = res.listOut //将获得的数据给tableData
this.aList = this.tableData0;
})
}
}
</script>
这是前端全部代码，三级表头也如此，只需后端数据格往里嵌套即可