后端返回parentId，前端处理成children嵌套数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了后端返回parentId，前端处理成children嵌套数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

vuetree函数：

/**

 * 构造树型结构数据

 * @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;

}

<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;

      });

    },
}
}

文章来源地址https://www.toymoban.com/news/detail-702226.html

到了这里，关于后端返回parentId，前端处理成children嵌套数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！