vue Element 기반 사용자 정의 트 리 예제 코드 구축

설명 하 다.
프로젝트 를 할 때 사용자 정의 트 리 컨트롤 을 사용 하여 표 트 리 를 구축 해 야 합 니 다.github 에서 적당 한(예 쁜)것 을 찾 지 못 하고 직접 사용 할 수 있 는 것 을 찾 았 습 니 다.Element 의 구성 요소 설명 을 볼 때 render 를 사용 하여 노드 스타일 을 정의 할 수 있 습 니 다.그래서 이 를 바탕 으로 증가,삭제,변경 할 수 있 는 트 리 구성 요 소 를 봉 인 했 습 니 다.이제 그것 의 사용 과 실현 을 공유 합 시다.
컨트롤 데모
github 에 걸 려 있 는 gif 는 비교적 카드 가 걸 릴 수 있 습 니 다.큰 사람 이 정적 자원 을 걸 수 있 는 곳 이 어디 있 는 지 알 고 있 습 니까?감사합니다.!

컨트롤 사용
개요
4

element-ui 트 리 컨트롤 을 바탕 으로 하 는 2 차 패키지

편집,노드 삭제 인 터 페 이 스 를 제공 합 니 다

4

next 갈 고 리 를 제공 합 니 다.업무 처리 에 실 패 했 을 때 next(false)스크롤 백 을 사용 할 수 있 습 니 다

컨트롤 소스 코드
문서.
props
속성
설명 하 다.
유형
value
원본 데이터,v-model 양 방향 바 인 딩 사용 가능
Array
events
이벤트 이름
설명 하 다.
매개 변수
SaveEdit
트 리 노드 를 편집 하거나 추가 한 저장 이 벤트 를 누 르 십시오.
(부모 노드 데이터,현재 노드 데이터,next)
DelNode
노드 이벤트 삭제
(부모 노드 데이터,현재 노드 데이터,next)
NodeClick
노드 클릭 이벤트
(현재 노드 데이터)
소스 데이터 기술
속성
설명 하 다.
value
트 리 노드 의 유일한 표식
label
트 리 노드 의 표시 이름
status
(1:편집 상태)(0:상태 표시)(-1 편집 불가 상태)
children
하위 노드 데이터
호출 예시

 <m-tree
  v-model="tableTree"
  @SaveEdit="SaveEdit"
  @DelNode="DelNode"
  @NodeClick="handleNodeClick"></m-tree>

SaveEdit(parentNode,data,next){
  var param = {
   parentNode:parentNode,
   node:data
  }
  this.$http.post(URL,param).then((response) => {
   if(response.status == 200){
    next(true,response.body.data.nodeId)
   }else{
    next(false)
   }
  })
}

실현 방식
하위 노드 템 플 릿 구축

 <span class="span_item">
  <span @click="Expanded">
   <Input v-if="node.status == 1" style="width: 100px;" v-model="node.label" size="small" ></Input>
   <Icon v-if="node.status == 0" type="asterisk"></Icon>
   <Icon v-if="node.status == -1" type="ios-keypad-outline"></Icon>
   <span v-if="node.status != 1">{{node.label}}</span>
  </span>
  <span v-if="node.status == 1">
   <Button style="margin-left: 8px;" size="small" type="success" icon="checkmark-circled" @click="SaveEdit">  </Button>
   <Button style="margin-left: 8px;" size="small" type="ghost" icon="checkmark-circled" @click="CancelEdit">  </Button>
  </span>
  <span class="span_icon">
    <Icon v-if="node.status == 0" style="margin-left: 8px" color="gray" type="edit" size="16" @click.native="OpenEdit"></Icon>
    <Icon v-if="node.status == 0" style="margin-left: 8px" type="plus-round" color="gray" size="16" @click.native="Append"></Icon>
    <Icon v-if="node.status == 0&&node.children.length < 1" style="margin-left: 8px" type="ios-trash" color="red" size="18" @click.native="Delete"></Icon>
  </span>
 </span>

하위 노드 는$emit 를 통 해 부모 노드 이벤트 에 알 립 니 다.

SaveEdit(){
  //      
  this.$emit('SaveEdit',this.nodeData)
},

부모 노드 핵심 구현,renderContent 함수 로 하위 노드 템 플 릿 을 불 러 옵 니 다.노드 저장 을 클릭 할 때 업무 파 라 메 터 를 runParam 에 저장 하여 업무 수행 실패(네트워크 요청 실패,서버 이상 등)의 데이터 스크롤 백 에 사용 합 니 다.

  <el-tree
   class="filter-tree"
   style="overflow:auto;"
   :data="treeData"
   :filter-node-method="filterNode"
   @node-click="handleNodeClick"
   ref="tree"
   node-key="value"
   :expand-on-click-node="false"
   :render-content="renderContent"
   default-expand-all>
  </el-tree>
  //     
  renderContent(h, { node, data, store }) {
    return h(TreeItem,{
     props:{
      value:data,
      treeNode:node
     },
     on:{
      input:(node)=>{
       data = node
      },
      Append: () => {
       node.expanded = true
       data.children.push({ value: this.$utilHelper.generateUUID(), label: '       ', children: [],status:1,isAdd:true })
      },
      //    
      SaveEdit:(nodeData)=> {
       //       
       var parentNode = this.$utilHelper.getNode(this.treeData,data.value).parentNode
       this.runParam.parentNode = parentNode
       this.runParam.data = data
       this.runParam.nodeData = nodeData
       this.$emit('SaveEdit',parentNode,data,this.CanSaveNext)
      }
     }
    })
   }

작업 결과 갈고리,next 함수 가 false 에 들 어 오 면 작업 실 패 를 판정 하고 runParam 의 매개 변 수 를 사용 하여 스크롤 백 을 진행 합 니 다.이 노드 의 편집 저장 작업 은 잘못 되 었 습 니 다.
소스 데모:트 리 컨트롤
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.