vue列表tree-props懒加载实现，vue普通表格改为树结构显示，el-table树实现点击添加下级节点

vue普通表格改为树结构显示，在普通表格基础上添加如下粗体字部分标签即可：

1、VUE中列表代码

<el-table
        ref="tableRef"
        :data="state.dataList"
        v-loading="state.loading"
        row-key="id"
        lazy
        :load="loadNode"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
        @selection-change="selectionChangHandle"
        @sort-change="sortChangeHandle"
        @row-click="clickRowLoad"
>
  <el-table-column type="selection" width="40" align="center" />
  <el-table-column type="index" label="#" width="40" />

</el-table>

• lazy: 懒加载
• hasChild: 是否有子节点，值应为布尔值。为true则加载children
• loadMethod: 实现加载子节点的方式

2、关键函数代码

const loadNode = (tree, node, resolve) => {        // 加载 树数据

  let params = {parentId : tree.id};
  platformClassificationTree(Object(params)).then((res) => {
    if(res.data.length){
      resolve(res.data);
    }else{
      resolve([]) // 加上这个，防止在该节点没有子节点时一直转圈的问题发生。
    }
  });
}

3、后台接口数据结构：默认加载一级节点后，发现节点即使有下级子节点，前面的打开箭头不显示，于是在返回一级节点数据结构中添加hasChildren=true解决

4、vue配置tree页面点击文字也能打开下级节点

需添加事件：@row-click="clickRowLoad"

// 点击展开节点
const  clickRowLoad = (row, column, event) =>  {


  if(!row.children || row.children.length==0){

      platformClassificationTree(Object({ parentId: row.id })).then((res) => {

        row.children=res.data;
      });

  }
  if (event.currentTarget.querySelector(".el-table__expand-icon")) {
    event.currentTarget.querySelector(".el-table__expand-icon").click();
  }
}

• children: 映射的要加载的子节点集合