집 >웹 프론트엔드 >JS 튜토리얼 >vue+element tree(트리 제어 데이터 형식) 구성요소 지식 포인트 요약

vue+element tree(트리 제어 데이터 형식) 구성요소 지식 포인트 요약

不言원래의: 2018-09-14 14:50:403897검색

이 글은 vue+element 트리(트리 제어 데이터 형식) 구성요소에 대한 지식 포인트를 요약한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

최근에 그룹에서 사용할 수 있는 첫 번째 구성 요소를 만들었습니다. 가장 간단한 버전이지만 많은 노력이 필요했습니다. 선배들이 문제를 해결하는 데 도움을 주었고 나는 그 문제를 해결할 수 있었습니다. 이 트리 구성요소의 작성 과정과 그 과정에서 사용된 지식 포인트를 기록하겠습니다.

우선 팝업창 + 마스크를 클릭해야 한다는 요구사항에 대해 이야기해보겠습니다. 팝업창의 내용은 물론 팝업의 크기는 얼마입니까? 창, 다중 선택 상자 표시 여부, 기본적으로 선택됨, 키워드로 노드 필터링(요소가 함께 제공됨) 알겠습니다) 자주 사용하는 여러 기능을 봉인했으며 나중에 다른 용도로 사용할 때 추가할 수 있습니다. . 모두 해결됨)

오늘은 데이터 처리 문제를 먼저 기록하겠습니다

백엔드와 통신한 후 인터페이스를 통해 이러한 데이터를 얻을 수 있다는 것을 알게 되었습니다.

[
            { 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' },
        ]

그리고 요소의 문서를 보면 다음과 같이 됩니다. 플러그인 데이터 형식을 사용하고 싶은지 확인하세요

    [{
        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'
      }]
    }]

그런 다음 데이터를 처리해야 합니다. 먼저 js 코드를 입력하세요

// 상위 노드를 루프아웃

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")//这样调用就好使了

네 개의 값이 연결됩니다. 위 함수에는 data, 모든 데이터 id, id의 필드 이름, pid parent 클래스 id의 필드 이름입니다. (전달되는 필드가 반드시 id pid label이라고 불리는 것은 아니기 때문에 작성됩니다. 생생하게)

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

이 함수만 사용하고 다시 호출하지 마세요. 해당 함수는 전달한 상위 요소로 구성됩니다. 배열을 사용하면 각 상위 요소의 직접 하위 요소가 상위 요소의 하위 필드로 푸시됩니다. 새로 생성된 하위 요소 배열을 다음 호출의 상위 요소 배열로 사용하면 됩니다. 이 함수는 계속해서 더 깊이 탐구됩니다.

vue+element tree(트리 제어 데이터 형식) 구성요소 지식 포인트 요약

관련 기사