element提供了el-tree组件,用于展示树形数据,必须为组件提供一个data属性,表示要展示的数据源。data数据的格式为
一个数组,数组的每一个项是一个对象,表示展示树的每一项;
每个对象中必须有一个label属性,
可以没有children属性,它是这个项下的子树,children必须是一个数组,数组的每项是一个展示项。
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
},
。。。
]
将一个对象或数组转为一个tree组件能使用的data数据,最后返回一个数组
判断传入的是一个引用类型数据还是一个基本类型数据;
如果是引用类型数据,就遍历它,再判断每个项是对象还是数组,分别进行处理,就是不断递归
如果是基本类型数据,那就没有children,直接拼一个label
transformToTreeData(obj) { // 返回数组,数组的每个项每个项必须是一个对象,对象必须有一个label属性,children属性必须是一个数组
const treeArr = [];
if (typeof obj === 'object') {
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
if (Object.prototype.toString.call(obj[key]) === '[object Array]') {
const arr = obj[key];
const children = [];
for (let i = 0; i < arr.length; i++) {
const arrItem = arr[i];
children.push({
label: i + 1,
children: this.transformToTreeData(arrItem)
});
}
const item = {
label: key,
children
};
treeArr.push(item);
} else if (
Object.prototype.toString.call(obj[key]) === '[object Object]'
) {
const item = {
label: key,
children: this.transformToTreeData(obj[key])
};
treeArr.push(item);
} else {
const val = key + ' : ' + obj[key];
treeArr.push({ label: val });
}
}
}
} else {
treeArr.push({
label: obj
});
}
return treeArr;
},