Summary of knowledge points of vue+element tree (tree control data format) component

This article brings you a summary of knowledge points about the vue element tree (tree control data format) component. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

I recently made the first component that can be used in the group. Although it is the simplest version, it also took a lot of effort. Seniors helped me solve the problem and I managed to get it done. Let me record the writing process of this tree component and the knowledge points used during the process.

First let’s talk about the requirements, which is to click on the pop-up window mask. The content of the pop-up window is a tree component. Of course, what is the size of the pop-up window? Whether to display the multi-select box? It is selected by default and filters the nodes (element) by keywords. All come with it) Several commonly used functions are sealed in, and they can be added later when they are used for other purposes. All solved)

Today we will first record the problem of processing data

After communicating with the backend, we learned that we will get such data through the interface:

[
            { id: '01', label: '测试活动', pId: '1' },
            { id: '011', label: '测试活动1', pId: '01' },
            { id: '012', label: '测试活动2', pId: '01' },
            { id: '02', label: '测试活动3', pId: '1' },
            { id: '021', label: '测试活动4', pId: '02' },
            { id: '022', label: '测试活动5', pId: '02' },
            { id: '0221', label: '测试活动6', pId: '022' },
            { id: '0222', label: '测试活动7', pId: '022' },
            { id: '0223', label: '测试活动6', pId: '022' },
            { id: '0224', label: '测试活动7', pId: '022' },
            { id: '0225', label: '测试活动6', pId: '022' },
            { id: '0226', label: '测试活动7', pId: '022' },
        ]

And we check the element The document will see that the data format you want to use their plug-in is like this

    [{
        id: 4,
        label: '二级 1-1',
        children: [{
          id: 9,
          label: '三级 1-1-1'
        }, {
          id: 10,
          label: '三级 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一级 2',
      children: [{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 6,
        label: '二级 2-2'
      }]
    }, {
      id: 3,
      label: '一级 3',
      children: [{
        id: 7,
        label: '二级 3-1'
      }, {
        id: 8,
        label: '二级 3-2'
      }]
    }]

Then we need to process the data, first enter the js code

// Loop out the parent node

export function toTreeData(data,id,pid,name) {
// 建立个树形结构,需要定义个最顶层的父节点，pId是1
    let parent = [];
    for (let i = 0; i < data.length; i++) {

        if(data[i][pid] !== "1"){
        }else{
          let obj = {
            label: data[i][name],
            id: data[i][id],
            children: []
          };
          parent.push(obj);//数组加数组值
        }
        // console.log(obj);
        //  console.log(parent,"bnm");

    }
    children(parent);

// 调用子节点方法,参数为父节点的数组
function children(parent) {
console.log(parent)
      if (data.length !== 0) {
        for (let i = 0; i < parent.length; i++) {
          for (let j = 0; j < data.length; j++) {
            if (parent[i].id == data[j][pid]){
              let obj = {
                label: data[j][name],
                id: data[j][id],
                children: []
              };
              parent[i].children.push(obj);
            }
          }
          children(parent[i].children);
        }
      }
    }
    console.log(parent,"bjil")
    return parent;
  }
  toTreeData(this.data,"id","pid","label")//这样调用就好使了

The four values ​​connected to the above function are all data id, the field name of id, pid, the field name of the parent class id, and the field name of the content (because the field passed is not necessarily called id, pid label, so it is flexible )

  toTreeData(this.data,"id","pid","label")//这样调用就好使了
  //这个回调函数作用当然是转换数组的格式

When this function is taken out alone without a callback, its function is that you pass in an array composed of parent elements, and it will push the direct child elements of each parent element into the children field of the parent element. , so that we only need to treat the array of newly generated child elements as the parent element array of the next call. When calling this function, it will continue to go deeper.

Related recommendations:

PHP infinite classification, tree data formatting

Summary of YiiFramework entry-level knowledge points (graphic tutorial), yiiframework knowledge points

The above is the detailed content of Summary of knowledge points of vue+element tree (tree control data format) component. For more information, please follow other related articles on the PHP Chinese website!