更改elementui的树状表格展开样式

表格样式

table改造

在第一个column中加入多级表头，通过获取的树机构的深度循环渲染出column当作各级下拉按钮表格

      <el-table v-loading="loading"
                row-key="nodeId"
                :data="tableData"
                :indent="30"
                style="width: 100%;margin-top:20px"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                border
                @expand-change="expandTable"
                :span-method="objectSpanMethod">
         <!-- <el-table-column align="center"
                         width="100">
        </el-table-column> -->
        <el-table-column align="center"
                         width="300"
                         label="节点"
                         prop="nodeId">
      <el-table-column
                         v-for="item in deepList+1"
                         :key="item"
                         :width="item==deepList+1?'150':'50'"
                         >
                         <template slot-scope="scope">
                            <!-- {{item==1?'':scope.row.nodeId}}
                            {{scope.row.nodeId}} -->
                            <span v-if="deepList==0">{{scope.row.nodeId}}</span>
                            <span v-else-if="scope.row.deep!=deepList">{{item==deepList+1?scope.row.nodeId:''}}</span>
                            <span v-else>{{scope.row.nodeId}}</span>
                            </template>
        </el-table-column>
      </el-table>

表格函数
监听展开并且合并格子达到响应的视觉效果

 import { tableTree, deepLevel, expandFn, expandNum } from '@/utils/data.ts'
  //   表格展开收回的回调
  expandTable (row, expanded) {
    // console.log(row, expanded, 12312313132)
    // 给打开的树节点添加expand为true
    expandFn(this.tableData, row, expanded)
    console.log(this.tableData, 'expandTable')
  }
  //   展开回调
  objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
    // 判断单元格是否是下拉单元格
    if (row.children && row.children.length > 0 && !!row.expand && columnIndex == 0) {
      const num = expandNum(row.children)
      //   console.log(row.children, columnIndex, 'row.children.length')
      return { rowspan: row.children.length + 1 + num, colspan: 1 }
    }
    // 判断是否是第一个有数据的格子，合并之后的格子，数量与之前的删除的格子相等
    else if (columnIndex == this.deepList && this.deepList != 0) {
      return { rowspan: 1, colspan: this.deepList - row.deep }
    }
    // 删除第一个有数据的格子之前到下拉格子之间的格子
    else if (columnIndex < this.deepList && columnIndex != 0) {
      //   console.log(this.deepList, columnIndex, 'this.deepList')
      return { rowspan: 1, colspan: 0 }
    }
  }

需要引用的对表格数据进行处理的函数

// 传入带有parent 的数组，把带有parent的数组转化成树结构
export function tableTree (rows: any, parentId: any, idField = 'nodeId', parentField = 'parent', childField = 'children') {
  const result = []
  for (const item of rows) {
    // console.log(item.nodeTitle)
    if (item[parentField] !== parentId) continue
    const children: any = tableTree(rows, item[idField], idField, parentField, childField)
    if (children.length > 0) {
      result.push(Object.assign({}, item, { [childField]: children }))
    } else {
      result.push(Object.assign({}, item))
    }
  }
  //   console.log(result, 'tableTree(')

  return result
}
//  获取树结构中所有的叶子节点 leaf
// 获取所有skipped为true的叶子节点 skippedLeaf
export function getleaf (tree: any, childField = 'children') {
  const leaf = []
  const skippedLeaf = []
  //   console.log(tree, 'tree')
  for (const item of tree) {
    if (item[childField] != null) {
      const leafs: any = getleaf(item[childField])
      //   console.log(leafs)
      leaf.push(...leafs.leaf)
      skippedLeaf.push(...leafs.skippedLeaf)
    } else {
      if (item.skipped == 'true' || item.runningState == 'SUCCEED') {
        skippedLeaf.push(item.nodeId)
      }
      leaf.push(item)
    }
  }
  return { leaf, skippedLeaf }
}

// 根据skippedLeaf数组。遍历leaf，更新leaf中的skipped
export function skippedLeaf (leaf: any, skippedLeaf: any) {
  const leafs = []
  //   console.log(skippedLeaf, 'skippedLeaf')

  for (const item of leaf) {
    for (const id of skippedLeaf) {
      //   console.log(item.id, id, item.id == id)
      if (item.nodeId == id) {
        item.skipped = 'true'
        break
      } else {
        item.skipped = 'false'
      }
    }
    leafs.push(item)
  }
  //   console.log(leafs, 'leafs')

  return leafs
}
// 遍历树添加每一项的深度，第一层为0
export function deepLevel (row: any, deep: number) {
  const result = []
  const deepList = []
  deepList.push(deep)
  const deepTip = deep + 1
  for (const item of row) {
    item.deep = deep
    if (item.children && item.children.length > 0) {
      const children: any = deepLevel(item.children, deepTip)
      result.push(Object.assign({}, item, { children: children.result }))
      deepList.push(...children.deepList)
    } else {
      result.push(item)
    }
    // console.log(item, row, 'item')
  }
  return { result, deepList }
}
// 遍历数据根据展开行nodeid，赋值expand 为true
export function expandFn (tableData: any, row: any, expanded: boolean) {
  for (const item of tableData) {
    if (row.nodeId == item.nodeId) {
      item.expand = expanded
    }
    if (item.children && item.children.length > 0) {
      expandFn(item.children, row, expanded)
    }
  }
}
// 遍历数据返回children展开格子的数量
export function expandNum (tableData: any) {
  let number = 0
  console.log(tableData, 'tableData')
  for (const item of tableData) {
    if (item.expand) {
      number += item.children.length
    }
    if (item.children && item.children.length > 0&& item.expand) {
      number += expandNum(item.children)
    }
  }
  return number
}

element自己有按层级把下拉按钮向右看10px，可以去掉他

/deep/.el-table__indent,.el-table__placeholder {
    display: none;
}