【elementUI+vue+el-table】树形数据使用表格呈现+表格自定义合并

我需要合并样式：

后端数据（树形）及我应展示的思路：

获取树形数据并变成列表数据：

getOrganizationTree().then((res) => {
    let that = this;
    if (res.code == 200) {
      console.log(res, "准备对接列表的属性接口");
      let yqName = res.data.YuanName
      let yqData = res.data.data // 因为我第一层园区只有一个数据 因此不做循环
      yqData.forEach(wsData => { // 循环温室children
        if (wsData.data.length>0) {
          wsData.data.forEach((areaData,wsindex) => {  // 循环区域children
            if (areaData.airdevice.length>0) {  // 这里判断土壤和空气传感器
              let l1 =  areaData.airdevice.length // 这里记录传感器数量
              areaData.airdevice.forEach((oneDevice,index) => {
                let data = {
                  YuanName:yqName,
                  wenName:wsData.wenName,
                  areaName:areaData.areaName,
                  deviceType:'空气传感器',
                  deviceId:oneDevice.deviceId,
                  deviceName:oneDevice.deviceName,
                  deviceNum:0,// 一会儿要合并的“传感器设备列”
                  areaNum:0,  // 一会儿要合并的“区域列”
                }
                if (index === 0) {
                  data.deviceNum = l1  // 改变“传感器设备列”数值 让每一个传感器的第一个对象的deviceNum有值 其他为0（比如图中第一个二氧化碳项deviceNum为4，下面三个均为0）
                } else{
                  data.deviceNum = 0
                }
                that.deviceTableData.push(data) 
              });
            }
            if (areaData.soildevice.length>0) {
              let l2 =  areaData.soildevice.length
              areaData.soildevice.forEach((oneDevice2,index) => {
                let data2 = {
                  YuanName:yqName,
                  wenName:wsData.wenName,
                  areaName:areaData.areaName,
                  deviceType:'土壤传感器',
                  deviceId:oneDevice2.deviceId,
                  deviceName:oneDevice2.deviceName,
                  deviceNum:0,
                  areaNum:0
                }
                if (index === 0) {
                  data2.deviceNum = l2
                } else{
                  data2.deviceNum = 0
                }
                that.deviceTableData.push(data2)
              });
            }
            if (that.areaIdFlag!=wsindex) {  //准备判断区域分层
                // 区域的合并长度（土壤传感器数量+空气传感器数量）
                let areaLen = areaData.airdevice.length+areaData.soildevice.length  
                // 判断是否有这层 没有的时候会报错
				if (that.deviceTableData[that.deviceTableData.length - areaLen] ) {
						// 数组长度-区域的合并长度 正好是应该这个区域首个元素 赋值给这个元素应该合并的长度
                        that.deviceTableData[that.deviceTableData.length - areaLen].areaNum = areaLen
                      } 
              that.areaIdFlag = wsindex // 再把定位标放在合并完的数值上
            }
          });
        }
      });
    } 
  });
  this.dialogVisible = true; // 列表弹窗弹出

data：

      dialogVisible2: false,
      deviceTableData: [],
      areaIdFlag:-1,

页面表格渲染：

<el-table
          :data="deviceTableData"
          :span-method="deviceSpanMethod"
          border
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="YuanName" label="园区" width="180"> </el-table-column>
          <el-table-column prop="wenName" label="温室"> </el-table-column>
          <el-table-column prop="areaName" label="区域">
          </el-table-column>
          <el-table-column prop="deviceType" label="传感器设备">
          </el-table-column>
          <el-table-column prop="deviceId" label="具体设备">
            <template slot-scope="scope">
              {{scope.row.deviceName}}
            </template>
          </el-table-column>
        </el-table>

表格合并函数：

    deviceSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 3 ) {
          if ( row.deviceNum!=0 ) {
              return [row.deviceNum, 1]
          } else return [0, 0]
        }
        if (columnIndex === 2 ) {
          if ( row.areaNum!=0 ) {
              return [row.areaNum, 1]
          } else return [0, 0]
        }
    },