vue之element-ui 的tree组件

这些天在学习vue做一个树结构，使用了elementui的组件。记录一下。

1.首先，从后台返回的数据是类似于这样的

let data = {
"returnCode": "000000",
"returnMsg": "success",
"projectInfo":[
	{"pName":"p2p实验项目","pId":"1cfb52ec8da74958bd870429eb2d092c","pPid":"b7a4446793bd478ca66823ab2a8698fa"},
	{"pName":"员工培训学习","pId":"3729fd93b8c54b97993874a01484e2b0","pPid":"b7a4446793bd478ca66823ab2a8698fa"},
	{"pName":"需求调研","pId":"512d289230fe4c7a85b747014843312b","pPid":"cfc7814925aa48949a4c1aa9601cd55d"},
	{"pName":"需求分析","pId":"6b411d0eeb164c2482e207cecc4588e2","pPid":"cfc7814925aa48949a4c1aa9601cd55d"},
	{"pName":"开发","pId":"1da77616d5514d979a9f89769ff375fe","pPid":"cfc7814925aa48949a4c1aa9601cd55d"},
	{"pName":"实施","pId":"958f2f237d2e4165ac5d6a1a0ef33995","pPid":"1cfb52ec8da74958bd870429eb2d092c"}
]	
}

包括id , 父id和将要在树结构显示的名称。

2.我使用了elementUI的tree。

<el-tree :data="affiliatedSystemData" :props="affiliatedSystemProps"  ref="tree"
	        	show-checkbox node-key="tId" > </el-tree>

//data里面
data () { 
affiliatedSystemData:[],
affiliatedSystemProps: {
	 children: 'children',
	  label: 'pName'
		        }
}

通过官网发现，tree需要的data的格式是这样的

data2: [{
          id: 1,
          label: '一级 1',
          children: [{
            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'
          }]
        }]

3.将后台的数据遍历成需要的树结构。

在这里我在网上找到了一个jsontree的方法。

//将后台的json转成jsonTree格式
var jsonTree = function (data,config) {
  //1.声明了变量，拿到传参过来的值，注意这里拿到的是string类型，不是对应的值
  var id = config.id || 'id',
      pid = config.pid || 'pid',
      children = config.children || 'children';
      var idMap = [],
      newIdMap = [],
      jsonTree = [];
 /*2.v[id]==v[“id”]==v.id
	idMap数组的下标对应着id为下标的相应json数据
	a[1]对应着id为1的json数据，以此类推*/
  data.forEach(function(v){
    idMap[v[id]] = v;
  });
  //3拿到当前遍历的父元素id
/*			根据父元素id，判断数组里是否存在这样一条数据
			存在，就判断父元素是否有子元素数组，若没有就添加一个children数组（传参过来的） 
			把当前元素添加父元素的children数组里
			不存在，就直接添加到jsonTree里*/
  data.forEach(function(v){
    var parent = idMap[v[pid]];
    //定义一个newIdMap
    delete v.parent;//删除{v}的parent和id
    //delete v.id;
    if(parent) {
      !parent[children] && (parent[children] = []);
      parent[children].push(v);
    } else {
      jsonTree.push(v);
    }
  });
  return jsonTree;
};

我们可以验证一下这个方法。

//模拟的json数据
				let data = [
					   {"id":1,"parent":0,'lable':'重庆'},
					   {"id":11,"parent":1,'lable':'上海'},
					   {"id":12,"parent":1,'lable':'北京'},
					   {"id":121,"parent":12,'lable':'合肥'},
					   {"id":2,"parent":0,"lable":'天津'},
					   {"id":21,"parent":2,"lable":'丰田'},
					   {"id":211,"parent":21,"lable":'饭店'},
					   //{"id":212,"parent":21,"lable":'饭店2'},
					   {"id":3,"parent":0,"lable":'厄尔'},
					   {"id":4,"parent":0,"lable":'汇报'},
					   {"id":31,"parent":3,"lable":'宝宝'},
					   {"id":32,"parent":3,"lable":'茁壮'}
					];
				var result = jsonTree(data, {
				    id: 'id',
				    pid: 'parent',
				    children: 'children'
				});
				console.log(result);
				var children = JSON.stringify(result, null, '\t');
				console.log(children)

控制台：

在这里我把父id的属性删掉了。 delete v.parent;这样刚好是我想要的数据。可是该死的后台传回来的是uuid,这样删除不行。于是又自己遍历把父id删除掉。

process(data, type){
				for(var i = 0; i < data.length; i++){
					delete data[i][type];
					if('children' in data[i]) this.process(data[i].children, type);
				}
			}

这样就符合要求了 。

最后的成果大概是这样的。

菜鸟一枚，所以不太理解官网里面的api，对于ES6语法也不熟，树最主要就是按自己需求遍历。