后端返回parentId,前端处理成children嵌套数据

rouyi 的 vuetree函数结合elementui el-table组件使用

把有parentId和id结构的数据处理成children嵌套数据,字段名称不一致,可以设置。

vuetree函数

html 复制代码
/**

 * 构造树型结构数据

 * @param {*} data 数据源

 * @param {*} id id字段 默认 'id'

 * @param {*} parentId 父节点字段 默认 'parentId'

 * @param {*} children 孩子节点字段 默认 'children'

 */

export function handleTree(data, id, parentId, children) {

  let config = {

    id: id || 'id',

    parentId: parentId || 'parentId',

    childrenList: children || 'children'

  };



  var childrenListMap = {};

  var nodeIds = {};

  var tree = [];



  for (let d of data) {

    let parentId = d[config.parentId];

    if (childrenListMap[parentId] == null) {

      childrenListMap[parentId] = [];

    }

    nodeIds[d[config.id]] = d;

    childrenListMap[parentId].push(d);

  }



  for (let d of data) {

    let parentId = d[config.parentId];

    if (nodeIds[parentId] == null) {

      tree.push(d);

    }

  }



  for (let t of tree) {

    adaptToChildrenList(t);

  }



  function adaptToChildrenList(o) {

    if (childrenListMap[o[config.id]] !== null) {

      o[config.childrenList] = childrenListMap[o[config.id]];

    }

    if (o[config.childrenList]) {

      for (let c of o[config.childrenList]) {

        adaptToChildrenList(c);

      }

    }

  }

  return tree;

}
html 复制代码
<template>

    <el-table

      v-if="refreshTable"

      v-loading="loading"

      :data="typeList"

      row-key="typeId"

      :default-expand-all="isExpandAll"

      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"

     >

      <el-table-column label="主键" align="center" prop="typeId" />

      <el-table-column label="类型编码" align="center" prop="typeCode" />

     ......

    </el-table>
</template>

export default{

data(){
    return{
        //一维数组:
        testdata:[
            {"id": 30035, "name": "分类1"},
            {"id": 30036, "name": "分类2"},
            {"id": 30037, "name": "分类3"},
            {"id": 30040, "name": "分类1-1", "parentId": 30035},
            {"id": 30041, "name": "分类2-1", "parentId": 30036},
            {"id": 30042, "name": "分类1-1-1", "parentId": 30040},
            {"id": 30043, "name": "分类1-1-2", "parentId": 30040},
            {"id": 30044, "name": "分类1-1-2-1", "parentId": 30043}
          ]
    }
},
methods:{
  getList() {

      this.loading = true;

      listType(this.queryParams).then(response => {

        this.typeList = this.handleTree(response.rows, 'typeCode', 'parentCode')

        this.total = response.total;

        this.loading = false;

      });

    },
}
}
相关推荐
mCell19 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip19 小时前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript