elemenetUI二级表头动态渲染

一、elemenetUI二级表头动态渲染

1. 接到需求写一个要做一个如图所示的表格，要求数据表头动态加载；

   ​ 开始拿到这个需求，对我一个后端开发人员来说还是有点难度，百度到一些多级表头渲染的，但是对后端传来的格式要求太多，耗费的精力也太多；

   最后参考百度的一篇博客终于成功渲染，废话不多说，直接上代码；

2. 后端需要传来的数据格式

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

1. 前端代码