如果数据是一次性返回的话,需要递归的方法去展示Tree组件的children
<template>
<Tree :data="data" :render="renderContent"></Tree>
</template>
展示内容的方法(官方文档有的)
renderContent(h, { root, node, data }) {
return h(
"span",
{
style: {
display: "inline-block",
width: "100%"
}
},
[
h("span", [
h("Icon", {
props: {
type: "ios-paper-outline"
},
style: {
marginRight: "8px"
}
}),
h("span", data.title)
]),
h(
"span",
{
style: {
display: "inline-block",
float: "right",
marginRight: "32px"
}
},
[
h("Button", {
props: {
icon: "ios-add"
},
style: {
marginRight: "8px"
},
on: {
click: () => {
this.append(data);
}
}
}),
h("Button", {
props: {
icon: "ios-remove"
},
on: {
click: () => {
this.remove(root, node, data);
}
}
})
]
)
]
);
},
//递归方法
handleTree: function(tree, obj) {
const result = [];
tree.forEach(item => {
let expand = false;//是否展开
let title = item[obj.title];//展示的名字
let children = item[obj.children];//子节点
// 如果有子节点,递归
if (children) {
children = this.handleTree(children, obj);
}
result.push({ expand, title, children });
});
return result;
}
请求接口返回的数据
async getAll() {
const { code, data, message } = await api.getStore();
const obj= {
title: "name",//接口返回的名称
children: "areaStores"//接口返回的子节点
};
this.data= this.handleTree(res.result, obj);
},