前端开发笔记：Vue将后端传来数据转换为树，并显示在el-tree上

问题描述

在页面加载时，自动从后端接收到一个复杂的树形结构，要从中提取出节点，创建新的树，符合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对应的值