vue 部门tree样式-凯发k8官方网

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

效果如下

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

});

}

}

总结

以上是凯发k8官方网为你收集整理的vue 部门tree样式_vue element实现tree树形数据展示的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。