怎么在vue中使用Element構建一個自定義樹

這期內容當中小編將會給大家?guī)碛嘘P怎么在vue中使用Element構建一個自定義樹，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

控件使用

概要

• 基于element-ui樹形控件的二次封裝

• 提供編輯、刪除節(jié)點的接口

• 提供一個next鉤子，在業(yè)務處理失敗時可使用next(false)回滾操作

• 控件源碼見 github

文檔

props

events

源數(shù)據(jù)描述

調用示例

 <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)
   }
  })
}

實現(xiàn)方式

構建子節(jié)點的模板

 <span class="span_item">
  <span @click="Expanded">
   <Input v-if="node.status == 1"  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  size="small" type="success" icon="checkmark-circled" @click="SaveEdit">確認</Button>
   <Button  size="small" type="ghost" icon="checkmark-circled" @click="CancelEdit">取消</Button>
  </span>
  <span class="span_icon">
    <Icon v-if="node.status == 0"  color="gray" type="edit" size="16" @click.native="OpenEdit"></Icon>
    <Icon v-if="node.status == 0"  type="plus-round" color="gray" size="16" @click.native="Append"></Icon>
    <Icon v-if="node.status == 0&&node.children.length < 1"  type="ios-trash" color="red" size="18" @click.native="Delete"></Icon>
  </span>
 </span>

子節(jié)點通過$emit通知父節(jié)點事件

SaveEdit(){
  //保存節(jié)點事件
  this.$emit('SaveEdit',this.nodeData)
},

父節(jié)點核心實現(xiàn)，使用renderContent函數(shù)加載子節(jié)點模板，點擊保存節(jié)點時將業(yè)務參數(shù)保存在runParam中用于在業(yè)務操作失敗（網(wǎng)絡請求失敗、服務端異常等情況）的數(shù)據(jù)回滾

  <el-tree
   class="filter-tree"
   
   :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>
  //子節(jié)點模板
  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 })
      },
      //保存節(jié)點
      SaveEdit:(nodeData)=> {
       //遞歸查找父節(jié)點
       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)
      }
     }
    })
   }

上述就是小編為大家分享的怎么在vue中使用Element構建一個自定義樹了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業(yè)資訊頻道。