說明
做項目的時候要使用到一個自定義的樹形控件來構建表格樹，在github上搜了一下沒有搜索到合適的（好看的）可以直接用的，查看Element的組件說明時發現它的Tree控件可以使用render來自定義節點樣式，于是基于它封裝了一個可以增、刪、改的樹形組件，現在分享一下它的使用與實現。
控件演示
github上掛的gif可能會比較卡，有沒有大佬知道還有哪里可以掛靜態資源的，謝謝。。！
控件使用
概要
文檔
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中的參數進行回滾，該節點的編輯保存操作將無效
源碼demo：calebman/vue-DBM
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
