vue 部门tree样式_vue+Element实现tree树形数据展示

简单粗暴是我的原则,方便复制粘贴是我的梦想!!!效果如下微信截图_20200710114604.pngimport { root } from '../../a

简单粗暴是我的原则,方便复制粘贴是我的梦想!!!

效果如下

微信截图_20200710114604.png

import { root } from '../../api/api';

export default {

data() {

return {

setTree:[],

defaultProps: {

children: 'children',

label: 'name'

},

}

},

methods: {

getListData() {

let dataArray = [];

this.setTree.forEach(function (data) {

let parentId = data.parentId;

if (parentId == null) {

let objTemp = {

id: data.id,

name: data.name,

/*order: data.order,*/

parentId: parentId,

}

dataArray.push(objTemp);

}

})

this.data2treeDG(this.setTree, dataArray)

},

data2treeDG(datas, dataArray) {

for (let j = 0; j < dataArray.length; j++) {

let dataArrayIndex = dataArray[j];

let childrenArray = [];

let Id = dataArrayIndex.id;

for (let i = 0; i < datas.length; i++) {

let data = datas[i];

let parentId = data.parentId;

if (parentId == Id) {//判断是否为儿子节点

let objTemp = {

id: data.id,

name: data.name,

/* order: data.order,*/

parentId: parentId,

}

childrenArray.push(objTemp);

}

}

dataArrayIndex.children = childrenArray;

console.log(666)

console.log(dataArrayIndex.children)

if (childrenArray.length > 0) {//有儿子节点则递归

this.data2treeDG(datas, childrenArray)

}

}

this.setTree = dataArray;

return dataArray;

},

},

created() {

var _this = this;

// 这边是请求数据的

root().then(data => {

_this.setTree = data

_this.getListData()

// this.$router.push({ path: '/table' });

});

}

}