树结构勾选内容转换为层级平铺表格

前提是不能跨级勾选，就是勾选了4级就不能勾选1、2、3了，所以结构也相对简单，只用考虑行合并，不用考虑列合并

递归将树结构的各层父级名称插入节点，拿到勾选的数据后循环出各条数据各层父级有多少条，也就是表格各级需要合并的行数

// 递归树结构
setlevel(data, flabel, fname = {}, level = 2) {
      data.map((ele) => {
        ele.level = level // 层级可以用来合并表头名称列，如果勾选到第四级，那么名称列就要合并4列
        ele.id = ele.name
        ele.label = ele.name
        ele.f_label = flabel
        ele.fname = fname // 将父级名称放到这里
        if (ele.children) {
          let _level = level + 1
          let _fname = JSON.parse(JSON.stringify(fname))
          _fname['name' + level] = ele.name // 将父级名称放到这里
          ele.children = this.setlevel(ele.children, flabel, _fname, _level)
        }
      })
      return data
    }

// 父级合并的行数
tableChange(data){
      let rowspans = {}
      data.map(el => {
        for (let k in el.fname){
          if (!rowspans[el.fname[k]]){
            rowspans[el.fname[k]] = 1
          } else {
            rowspans[el.fname[k]]++
          }
        }
      })
      this.data.textareas.jgcomp.tabledata.rowspans = rowspans
    }

渲染表格：除了第一行之外，各行的各层级父名称和上一行的不一样才渲染

<tbody>
              <tr :key='it' v-for="(it, index) in data.jgcomp.select.flgz.value">
                <template v-for="(val,k) in it.fname">
                  <template v-if='index'>
                    <td :key="val" :rowspan="data.jgcomp.tabledata.rowspans[val]" v-if="val !== data.jgcomp.select.flgz.value[index-1].fname[k]">{{val}}</td>
                  </template>
                  <template v-else>
                    <td :key="val" :rowspan="data.jgcomp.tabledata.rowspans[val]">{{val}}</td>
                  </template>
                </template>
                <td>{{it.name}}</td>
                <td>{{it.data}}</td>
              </tr>
            </tbody>

有其他简单的好方法请评论，谢谢