element 树形表格行列转换（行列转换系列2）

我们上篇文章写的是关于element普通表格的行列转换，下面我们开始写element树形表格的行列转换

实现效果：

首先：我们通过element的官方文档中可以看出、当row 字段中包含children字段时，会被当做树形数据，但是前提必须指定一个唯一的 row-key ,意思是不管父级还是子级，都要有row-key指定的字段且不能重复，同时也要在tree-props 中指定children 与 hasChildren（用于懒加载）

row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"

根据后端给接口数据格式，我们知道在data数组的第一个值的dataValue为表头数据

data:[
	{
	dataValue:[
		  "累计流量(Nm³)\\时间",
          "2022-02-12 07:00:00",
          "2022-03-13 08:00:00",
          "2022-04-15 09:00:00",
          "2022-04-16 10:00:00",
          "2022-05-12 11:00:00"],
     id:1,
     childrn:[]
	},
	{
	 dataValue:["0","0","0","0","0","0"],
     id:2,
     childrn:[
     	{
     	dataValue:["0","0","0","0","0","0"],
        id:3,
        childrn:[
        		{
        			dataValue:["0","0","0","0","0","0"],
                	id:4,
                	childrn:[]
				},
				{
        			dataValue:["0","0","0","0","0","0"],
                	id:5,
                	childrn:[]
				}
           ]
     	}
     ]
	},
	{
	 dataValue:["0","0","0","0","0","0"],
     id:6,
     childrn:[
     	{
     	dataValue:["0","0","0","0","0","0"],
        id:7,
        childrn:[]
     	}
     ]
	}
]

根据接口数据进行拆解

getApi().then(res => {
        if (res.status === 200) {
          this.tableHead = res.data.data[0].dataValue
          this.workProcedureData1 = res.data.dataList
          this.workProcedureData1.shift()
        }
      })

开始渲染数据，与普通渲染一致

 <el-table
            :data="workProcedureData1"
            style="width: 100%"
            height="100%"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column
              v-for="(item, index) in tableHead"
              :key="index"
              :label="item"
              align="center"
            >
              <template >
               <template slot-scope="scoped">
                    {{ scoped.row.dataValue[index] }}
                </template>
              </template>
            </el-table-column>
          </el-table>

树形表格行列转换到这里就结束了，下篇文章写多级表头的行列转换