elemenetui 布局_elemenetUI二级表头动态渲染

一、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,只有这样才能做到动态渲染：

前端代码

{{ scope.row.aList[index].amountList[indexChild].count}}

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;

})

}

}

​

这是前端全部代码，三级表头也如此，只需后端数据格往里嵌套即可