问题描述
在页面加载时,自动从后端接收到一个复杂的树形结构,要从中提取出节点,创建新的树,符合el-tree的data属性格式,并显示出来
后端传来的数据格式及需求
data 表示子树,node中包含了节点的相关信息
我需要让node中的pictur_name作为新树的节点
el-tree的data属性需要的是一个列表,在列表里套字典如:
[{
label: '一级 1',
children: [{}]
}]
已知后端传来的数据格式为:
{
"data": [
{
"data": [
{
"data": [
{
"data": [],
"node": {
"bucket": 1,
"pictur_name": "Greenprint_3"
}
}
],
"node": {
"bucket": 0,
"pictur_name": "Greenprint_2"
}
},
{
"data": [],
"node": {
"bucket": 0,
"pictur_name": "8a6e1958-9b0f-43f0-82de-e6ab15bb1963.jpg"
}
},
{
"data": [],
"node": {
"bucket": 0,
"pictur_name": "446e2a73-d6fb-4522-933c-d977ff8e30cd.jpg"
}
},
{
"data": [],
"node": {
"bucket": 0,
"pictur_name": "88445957-8c07-41a7-9158-1ded9e8f1dbd.jpg"
}
},
{
"data": [],
"node": {
"bucket": 0,
"pictur_name": "dc02c487-c2a7-4622-a50e-f8fbc7d60121.jpg"
}
}
],
"node": {
"bucket": null,
"pictur_name": "Greenprint"
}
}
],
"status": true
}
因此我们需要:
- 创建列表
- 简化传来的数据,让 label 为 pictur_name的值,children 为 data的值
从后端接受数据
数据部分
data() {
return {
// 从后端接受到的数据
project_data: [],
// 转换后的树
project_tree: [],
//告知el-tree谁是节点,谁是子树的参数
tree_props: { children: "children", label: "pictur_name" },
};
},
接受数据的函数
- 因为要在界面加载时去获取,因此会用到钩子函数
- 在created()钩子函数中,不是完全按程序所写顺序进行(要使用异步相关处理,否则接受到的数据可能为undefined)
- 建议多使用console.log()来打印获取到的数据,如果response.data的数据格式不对,可能要response.data.data
methods: {
async fetchData() {
const apiUrl = "此处填入后端提供的url";
await axios
.get(apiUrl)
.then((response) => {
this.project_json[0] = response.data.data;
})
.catch((error) => {
console.error(error);
});
},
},
以我测试时接受到的数据为例:
页面创建时,钩子函数
async created() {
await this.fetchData(); //等待从后端获取数据
//将数据转换为树的函数
function buildTree(data) {
if (!Array.isArray(data) || data.length === 0) {
return null;
}
const tree = [];
for (let i = 0; i < data.length; i++) {
const nodeData = data[i];
const node = {
pictur_name: nodeData.node.pictur_name,
children: buildTree(nodeData.data),
};
tree.push(node);
}
return tree;
}
//核心转换树的过程
const tree = buildTree(this.project_json[0]);
this.project_tree = JSON.parse(JSON.stringify(tree, null, 2));
//测试语句
console.log(this.project_tree);
console.log(JSON.stringify(tree, null, 2));
},
两个console.log的结果
传给el-tree
<el-tree :data="project_tree" :props="tree_props"> </el-tree>
其中要保证你的tree_props符合以下格式要求
-
{ children: "填入子树对应的键", label: "填入节点对应的键" }, //children和label这两个本身
以我的为例,展现的树的节点,将是pictur_name对应的值