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. 前端代码

<template>

<div>

  <el-table v-loading="loading" :data="tableData" border style="width: 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>

​

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