后端返回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;

      });

    },
}
}
相关推荐
秋田君7 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
爱隐身的官人7 分钟前
ctfshow - web - nodejs
前端·nodejs·ctf
zhong liu bin7 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
W-GEO7 分钟前
前端安全攻防:XSS, CSRF 等常见威胁的防范与检测指南
前端·安全·xss
2301_8035545210 分钟前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn11 分钟前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤12 分钟前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n123523519 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子25 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐26 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui