vue 部门tree样式_vue+Element实现tree树形数据展示
简单粗暴是我的原则，方便复制粘贴是我的梦想！！！
效果如下
微信截图_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树形数据展示的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 云闪付还信用卡有手续费吗
- 下一篇： 谷歌浏览器chrome的vuejs de