ant jeecg vue 树状结构转换原生表格

    <center>
      <table border="1" style="width: 90%">
        <thead>
          <tr>
            <th class="th1">计分项目</th>
            <th class="th1">类别</th>
            <th class="th1">计分依据</th>
            <th class="th1">计分标准</th>
            <th class="th1">备注</th>
          </tr>
        </thead>
        <tbody>
          <!-- dataList -->
          <tr v-for="(v, i) in dataSource" :key="i">
            <!-- :rowspan="v.childs.length" -->
            <td v-if="spanArr[i]" :rowspan="spanArr[i]" :colspan="1" class="td1">{{ v.name1 }}</td>
            <td v-if="spanArr2[i]" :rowspan="spanArr2[i]" :colspan="1" class="td1">{{ v.name2 }}</td>
            <td class="td2">{{ v.name3 }}</td>
            <td class="td1">{{ v.fraction + '分/' +v.unitText }}</td>
            <td v-if="spanArr[i]" :rowspan="spanArr[i]" :colspan="1" class="td5">{{ v.remark }}</td>
          </tr>
        </tbody>
      </table>
    </center>

<script>


export default {
  name: '树结构转原生表格',
  components: {},
  data() {
    return {
      dataSource: [],
      yearObj: {},
      treeList: [],
      dataList: [],
      spanArr: [], // 记录当前单元格向下合并的行数，为0的话说明该单元格在行方向上已被合并不用显示
      pos: 0, // 记录当前单元格所处的行下标
      spanArr2: [], // 记录当前单元格向下合并的行数，为0的话说明该单元格在行方向上已被合并不用显示
      pos2: 0, // 记录当前单元格所处的行下标
      exportData: [], // 需要导出的内容     
    }
  },
  created() {
    this.getYear() // 只有积分申请要获取 getYear
    this.getDictDataList()
  },
  },
  methods: {
    async getYear() {
      let url = '/integral/yearCriteria/list'
      let obj = { enable: '1' }
      try {
        const res = await getAction(url, obj)
        console.log(res, 'res getYear')

        if (res.success) {
          this.yearObj = res.result.records[0]
          this.getSocTree(this.yearObj.id)
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getSocTree(yearId) {
      let url = '/integral/scoringCriteria/getTree'
      let obj = {
        yearId
      }
      try {
        const res = await postAction(url, obj)
        // console.log(res, 'res  基本标准树状')
        if (res.success) {
          let arr = res.result

          arr.forEach((v, i) => {
            v['rowNum'] = 0
            if (v.childs && v.childs.length > 0) {
              v.childs.forEach((vC, iC) => {
                if (vC.childs && vC.childs.length > 0) {
                  vC.rowNum = vC.childs.length
                }
              })
            }
          })
          arr.forEach((v, i) => {
            if (v.childs && v.childs.length > 0) {
              for (let index = 0; index < v.childs.length; index++) {
                v.rowNum += v.childs[index].rowNum
              }
            }
          })
          let arr2 = []

          arr.forEach((v, i) => {
            if (v.childs && v.childs.length > 0) {
              v.childs.forEach((vC, iC) => {
                if (vC.childs && vC.childs.length > 0) {
                  vC.childs.forEach((vCC, iCC) => {
                    arr2.push({
                      name1: v.name,
                      name2: vC.name,
                      name3: vCC.name,
                      row1: v.rowNum,
                      row2: vC.rowNum,
                      unit: vCC.unit,
                      unitText: '',
                      fraction: vCC.fraction,
                      remark: v.remark
                    })
                  })
                }
              })
            }
          })   

          this.dataSource = JSON.parse(JSON.stringify(arr2))

          this.getRows()
          this.getRows2()
        }
      } catch (error) {
        console.log(error, 'error !!!')
      }
    },
    // 初始化需要合并的数据数组,计算合并后需要展示的行数
    // 以数组中每条数据的商品id来判断，如果商品id相同说明是同一种商品的不同规格，则需要合并
    getRows() {
      let list = this.dataSource
      list.forEach((ele, i) => {
        if (i === 0) {
          // 第一行，一定展示不需要合并
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 非第一行
          if (ele.name1 === list[i - 1].name1) {
            // 当前行的id和上一行的id相同了，则当前行需要和上一行的进行合并,当前行的该单元格不显示
            this.spanArr[this.pos] += 1 // 需要向下合并的行数加1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      })
      // console.log('合并的数据', this.spanArr)
    },
    getRows2() {
      let list = this.dataSource
      list.forEach((ele, i) => {
        if (i === 0) {
          // 第一行，一定展示不需要合并
          this.spanArr2.push(1)
          this.pos2 = 0
        } else {
          // 非第一行
          if (ele.name2 === list[i - 1].name2) {
            // 当前行的id和上一行的id相同了，则当前行需要和上一行的进行合并,当前行的该单元格不显示
            this.spanArr2[this.pos2] += 1 // 需要向下合并的行数加1
            this.spanArr2.push(0)
          } else {
            this.spanArr2.push(1)
            this.pos2 = i
          }
        }
      })
       console.log('合并的数据2', this.spanArr2)
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.th1 {
  text-align: center;
  padding: 10px;
}
.td1 {
  padding: 0 10px;
}
.td2 {
  padding: 5px 20px 5px 10px;
}
.td5 {
  padding: 0 20px 0 10px;
  width: 10%;
}
</style>