在表格添加tree-props属性
:tree-props="{children: 'children', hasChildren: 'haschildren'}"
树形结构数据封装(建新js用来封装数据)
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
* @param {*} rootId 根Id 默认 0
*/
export function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
//对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
//循环所有项
const treeData = cloneData.filter(father => {
let branchArr = cloneData.filter(child => {
//返回每一项的子级数组
return father[id] == child[parentId]
});
branchArr.length > 0 ? father.children = branchArr : '';
//返回第一层
return father[parentId] == rootId;
});
return treeData != '' ? treeData : data;
}
在main.js里全局引入文件
import {handleTree } from "@/utils/封装的文件名";
// 全局方法挂载
Vue.prototype.handleTree = handleTree
列表请求方式
getList() {
this.loading = true;
pfgl.getpfxpzList(this.queryParams).then(res => {
this.loading = false;
if(res.data){
res.data.forEach((d)=>{
d.children=[]
if(!d.parentId){
d.parentId=0
}
this.menuList = this.handleTree(res.data);
}
)
}else{
this.menuList=[]
}
});
},