树型结构-vue

表格树型结构的处理--树型处理工具函数

/***
 *   数组树形结构 转数型结构
 * */
export function ArrTree(data) {
  var nwearr = data;
  let result = [];
  if (!Array.isArray(data)) {
    return result;
  }
  data.forEach(item => {
    delete item.children;
  });
  let map = {};
  data.forEach(item => {
    map[item.id] = item;
  });
  data.forEach(item => {
    let parent = map[item.pid];

    if (parent) {
          if (item.pid != 0) {
            let fffffff = nwearr.find(cc => {
              return cc.id == item.pid;
            });
            if (fffffff != undefined) {
              (parent.children || (parent.children = [])).push(item);
            }
          } else {
            (parent.children || (parent.children = [])).push(item);
          }
    } else {
      if (item.pid != 0) {
        let  fffffff = nwearr.find(cc => {
          return cc.id == item.pid;
        });
        if (fffffff != undefined) {
          result.push(item);
        }
      } else {
        result.push(item);
      }
    }
  });
  return result;
}

页面

<el-table  :row-class-name="tableRowClassName" ref="table" height="75vh" v-loading="crud.loading"
              v-watermark="{text:syname,textColor:'rgba(180, 180, 180, 0.3)'}"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              row-key="id"
              :data="ArrTree(crud.data)" @select="crud.selectChange" @select-all="crud.selectAllChange"
              @selection-change="crud.selectionChangeHandler">```

toggleRowExpansion(isExpansion){
  this.toggleRowExpansion_forAll(this.crud.data,isExpansion);
},
toggleRowExpansion_forAll(data,isExpansion){
  data.forEach(item=>{
    this.$refs.table.toggleRowExpansion(item,isExpansion);
    if(item.children != undefined && item.children != null){
      this.toggleRowExpansion_forAll(item.children,isExpansion);
    }
  })
}