zoukankan      html  css  js  c++  java
  • el-tree树结构的数据封装

    返回数据类型:
    [
    {label:'第一级',id:'1'}
    {label:'1-1',id:'2',pId:'1'}
    {label:'1-1-1',id:'3',pId:'2'}
    ]

    组件处理:
    template中:

    <el-tree :data="menu" />

    computed:{

    //  datalist为接口返回值

      menu: function() {

      if (this.dataList&& this.dataList.length > 0) {
    return this.menuC(this.uTreeList);
    } else {
    return [];
    }
    }

    }

    methods:{

    // menu 数据处理
    menuC(data) {
    const fatherMenu = data.filter((item) => !item.pId);
    const childrenMenus = data.filter((item) => item.pId);
    this.fatherNode(fatherMenu, childrenMenus); // 处理父子
      this.childrenNodes(childrenMenus); // 深度处理子与子
    return fatherMenu;
    },
    fatherNode(f, c) {
    f.map((i) => {
    item.children = [];
    c.map((ii) => {
    if (ii.pId === i.id) {
    i.children.push(ii);
    }
    });
    });
    return f;
    },
    childrenNodes(c) {
    c.map(i => {
    ite.children = [];
    c.map(ii => {
    if (ii.pId === i.id) {
    i.children.push(ii);
    }
    });
    });
    return c;
    }
    }
  • 相关阅读:
    二维数组和最大字数组求取 2
    spring冲刺第七天
    spring冲刺第六天
    寻找水王
    spring冲刺第五天
    spring冲刺第四天
    spring冲刺第三天
    spring冲刺第二天
    大道至简读书笔记3
    spring冲刺第一天
  • 原文地址:https://www.cnblogs.com/media/p/14607739.html
Copyright © 2011-2022 走看看