vue+element tree(树形控件数据格式)组件(1)

vue+element tree(树形控件数据格式)组件(1),

最近作了第一个组内可使用的组件，虽然是最简版，也废了很多力。各位前辈帮我解决问题，才勉强搞定。让我来记录这个树形组件的编写过程和期间用到的知识点。

首先说说需求，就是点击出现弹窗+蒙板，弹窗内容是一个树组件固然，什么弹窗大小啊，是否显示多选框，默认选中，经过关键字过滤节点（element都自带好了）几个经常使用功能都封进来，等之后用到别的的时候再往里加。都解决了）

今天先记录处理数据的问题

与后台交流后得知经过接口会拿到这样的数据：

[
            { id: '01', label: '测试活动', pId: '1' },
            { id: '011', label: '测试活动1', pId: '01' },
            { id: '012', label: '测试活动2', pId: '01' },
            { id: '02', label: '测试活动3', pId: '1' },
            { id: '021', label: '测试活动4', pId: '02' },
            { id: '022', label: '测试活动5', pId: '02' },
            { id: '0221', label: '测试活动6', pId: '022' },
            { id: '0222', label: '测试活动7', pId: '022' },
            { id: '0223', label: '测试活动6', pId: '022' },
            { id: '0224', label: '测试活动7', pId: '022' },
            { id: '0225', label: '测试活动6', pId: '022' },
            { id: '0226', label: '测试活动7', pId: '022' },
        ]

而咱们查看element的文档会看到想要用他们的插件数据格式是这样的

[{
        id: 4,
        label: '二级 1-1',
        children: [{
          id: 9,
          label: '三级 1-1-1'
        }, {
          id: 10,
          label: '三级 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一级 2',
      children: [{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 6,
        label: '二级 2-2'
      }]
    }, {
      id: 3,
      label: '一级 3',
      children: [{
        id: 7,
        label: '二级 3-1'
      }, {
        id: 8,
        label: '二级 3-2'
      }]
    }]

那这就要咱们处理数据了，先上js代码

// 循环出父节点

export function toTreeData(data,id,pid,name) {
// 创建个树形结构,须要定义个最顶层的父节点，pId是1
    let parent = [];
    for (let i = 0; i < data.length; i++) {

        if(data[i][pid] !== "1"){
        }else{
          let obj = {
            label: data[i][name],
            id: data[i][id],
            children: []
          };
          parent.push(obj);//数组加数组值
        }
        // console.log(obj);
        //  console.log(parent,"bnm");

    }
    children(parent);

// 调用子节点方法,参数为父节点的数组
function children(parent) {
console.log(parent)
      if (data.length !== 0) {
        for (let i = 0; i < parent.length; i++) {
          for (let j = 0; j < data.length; j++) {
            if (parent[i].id == data[j][pid]){
              let obj = {
                label: data[j][name],
                id: data[j][id],
                children: []
              };
              parent[i].children.push(obj);
            }
          }
          children(parent[i].children);
        }
      }
    }
    console.log(parent,"bjil")
    return parent;
  }
  toTreeData(this.data,"id","pid","label")//这样调用就好使了

上面函数接的四个值分别是data全部数据 id id的那个字段名字 pid 父类id的字段名字 name 内容的字段名字 （由于传过来的字段不必定叫 id pid label因此写活的）

toTreeData(this.data,"id","pid","label")//这样调用就好使了
  //这个回调函数做用固然是转换数组的格式

单独拿出来这个函数不回调的时候它的做用就是你传入父元素组成的数组，它会把每个父元素的直属子元素压入父元素的children字段中去，这样咱们只须要把新生成的子元素组成的数组当作下一次调用的父元素数组调用这个函数它就会继续往里面深刻

原做者文章地址：https://www.cnblogs.com/dongy...

方法二：最近在gayhub上看到的 万能啊这个

getListData(data, config) {
    var id = config.id || 'id';
    var pid = config.pid || 'pid';
    var children = config.children || 'children';
    // var label=config.label || 'LctnName';
    var idMap = {};
    var jsonTree = [];
    data.forEach(function (v) {
        idMap[v[id]] = v;
    });
    data.forEach(function (v) {
        var parent = idMap[v[pid]];
        if (parent) {
            !parent[children] && (parent[children] = []);
            parent[children].push(v);
        } else {
            jsonTree.push(v);
        }
    });
    return jsonTree;
}

getListData(
    data.rows, 
    {
        id: 'ID',
        pid: 'ParentID',
        children: 'children'
    }
);

附上gayhub地址 ：
把扁平化的数据转换成树形结构的JSON