簡單粗暴是我的原則，方便復(fù)制粘貼是我的夢想！！！

效果如下

微信截圖_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) {//判斷是否為兒子節(jié)點(diǎn)

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) {//有兒子節(jié)點(diǎn)則遞歸

this.data2treeDG(datas, childrenArray)

}

}

this.setTree = dataArray;

return dataArray;

},

},

created() {

var _this = this;

// 這邊是請求數(shù)據(jù)的

root().then(data => {

_this.setTree = data

_this.getListData()

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

});

}

}

總結(jié)

以上是生活随笔為你收集整理的vue 部门tree样式_vue+Element实现tree树形数据展示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。