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

成都創(chuàng)新互聯(lián)服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過(guò)十載的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專(zhuān)業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶(hù)要求對(duì)網(wǎng)站進(jìn)行成都做網(wǎng)站、成都網(wǎng)站建設(shè)、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶(hù)網(wǎng)站對(duì)外宣傳展示的首要目的，并為客戶(hù)企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

控件使用

概要

• 基于element-ui樹(shù)形控件的二次封裝

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

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

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

文檔

props

屬性	說(shuō)明	類(lèi)型
value	源數(shù)據(jù)，可使用v-model雙向綁定	Array

events

事件名	說(shuō)明	參數(shù)
SaveEdit	點(diǎn)擊編輯或者添加樹(shù)節(jié)點(diǎn)后的保存事件	(父節(jié)點(diǎn)數(shù)據(jù)、當(dāng)前節(jié)點(diǎn)數(shù)據(jù)、next)
DelNode	刪除節(jié)點(diǎn)事件	(父節(jié)點(diǎn)數(shù)據(jù)、當(dāng)前節(jié)點(diǎn)數(shù)據(jù)、next)
NodeClick	節(jié)點(diǎn)點(diǎn)擊事件	(當(dāng)前節(jié)點(diǎn)數(shù)據(jù))

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

屬性	說(shuō)明
value	樹(shù)節(jié)點(diǎn)的唯一標(biāo)識(shí)
label	樹(shù)節(jié)點(diǎn)的顯示名稱(chēng)
status	(1：編輯狀態(tài))(0：顯示狀態(tài))(-1不可編輯狀態(tài))
children	子節(jié)點(diǎn)數(shù)據(jù)

調(diào)用示例

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

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

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

 <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">確認(rèn)</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é)點(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(wǎng)絡(luò)請(qǐng)求失敗、服務(wù)端異常等情況）的數(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é)點(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)輸入模塊名稱(chē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è)自定義樹(shù)了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：怎么在vue中使用Element構(gòu)建一個(gè)自定義樹(shù)-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://www.rwnh.cn/article42/djpphc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)