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

效果如下

微信截圖_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' });

});

}

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。