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

為鶴壁等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及鶴壁網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、鶴壁網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

控件使用

概要

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

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

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

• 控件源碼見(jiàn) github

文檔

props

events

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

調(diào)用示例

 

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

實(shí)現(xiàn)方式

構(gòu)建子節(jié)點(diǎn)的模板

 
  
   
   
   
   {{node.label}}
  
  
   確認(rèn)
   取消
  
  
    
    
    
  
 

子節(jié)點(diǎn)通過(guò)$emit通知父節(jié)點(diǎn)事件

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

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

  
  
  //子節(jié)點(diǎn)模板
  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: '請(qǐng)輸入模塊名稱', children: [],status:1,isAdd:true })
      },
      //保存節(jié)點(diǎn)
      SaveEdit:(nodeData)=> {
       //遞歸查找父節(jié)點(diǎn)
       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構(gòu)建一個(gè)自定義樹了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。