vue基于Element構(gòu)建自定義樹的示例代碼
說明
做項目的時候要使用到一個自定義的樹形控件來構(gòu)建表格樹,在github上搜了一下沒有搜索到合適的(好看的)可以直接用的,查看Element的組件說明時發(fā)現(xiàn)它的Tree控件可以使用render來自定義節(jié)點樣式,于是基于它封裝了一個可以增、刪、改的樹形組件,現(xiàn)在分享一下它的使用與實現(xiàn)。
控件演示
github上掛的gif可能會比較卡,有沒有大佬知道還有哪里可以掛靜態(tài)資源的,謝謝。。!
控件使用
概要
- 基于element-ui樹形控件的二次封裝
- 提供編輯、刪除節(jié)點的接口
- 提供一個next鉤子,在業(yè)務(wù)處理失敗時可使用next(false)回滾操作
- 控件源碼見 github
文檔
props
屬性 | 說明 | 類型 |
---|---|---|
value | 源數(shù)據(jù),可使用v-model雙向綁定 | Array |
events
事件名 | 說明 | 參數(shù) |
---|---|---|
SaveEdit | 點擊編輯或者添加樹節(jié)點后的保存事件 | (父節(jié)點數(shù)據(jù)、當(dāng)前節(jié)點數(shù)據(jù)、next) |
DelNode | 刪除節(jié)點事件 | (父節(jié)點數(shù)據(jù)、當(dāng)前節(jié)點數(shù)據(jù)、next) |
NodeClick | 節(jié)點點擊事件 | (當(dāng)前節(jié)點數(shù)據(jù)) |
源數(shù)據(jù)描述
屬性 | 說明 |
---|---|
value | 樹節(jié)點的唯一標(biāo)識 |
label | 樹節(jié)點的顯示名稱 |
status | (1:編輯狀態(tài))(0:顯示狀態(tài))(-1不可編輯狀態(tài)) |
children | 子節(jié)點數(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) } }) }
實現(xiàn)方式
構(gòu)建子節(jié)點的模板
<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">確認(rèn)</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>
子節(jié)點通過$emit通知父節(jié)點事件
SaveEdit(){ //保存節(jié)點事件 this.$emit('SaveEdit',this.nodeData) },
父節(jié)點核心實現(xiàn),使用renderContent函數(shù)加載子節(jié)點模板,點擊保存節(jié)點時將業(yè)務(wù)參數(shù)保存在runParam中用于在業(yè)務(wù)操作失?。ňW(wǎng)絡(luò)請求失敗、服務(wù)端異常等情況)的數(shù)據(jù)回滾
<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> //子節(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) } } }) }
操作結(jié)果鉤子,如果next函數(shù)傳入false則判定操作失敗,使用runParam中的參數(shù)進行回滾,該節(jié)點的編輯保存操作將無效
源碼demo:calebman/vue-DBM
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中v-if和v-for一起使用的弊端及解決辦法(同時使用 v-if 和 v-for不
當(dāng) v-if 和 v-for 同時存在于一個元素上的時候,v-if 會首先被執(zhí)行,這篇文章主要介紹了vue中v-if和v-for一起使用的弊端及解決辦法,需要的朋友可以參考下2023-07-07Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法
這篇文章主要介紹了Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例
這篇文章主要為大家介紹了vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08vue自定義指令和動態(tài)路由實現(xiàn)權(quán)限控制
這篇文章主要介紹了vue自定義指令和動態(tài)路由實現(xiàn)權(quán)限控制的方法,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下2020-08-08