vue實現樹形結構增刪改查的示例程式碼
其實很多公司都會有類似於使用者許可權樹的增刪改查功能,正好最近我剛寫了一個樹形結構的增刪改,在這裡和大家分享一下,如果有不合理的地方歡迎評論,我會盡快優化~~ 先附上一下效果圖
這個是沒有點選編輯時,產品的需求是選中某個節點,取得該節點對應的裝置資料,所以初始頁面是下面這個樣子的。
這個是點選了編輯之後,顯示節點的編輯按鈕
點選最上面的新增按鈕,顯示最外層父節點的新增畫面
修改節點名稱
因為我們的需求是編輯與非編輯兩種狀態,所以我用了兩個樹形元件,通過v-if進行控制。(v-if:該元件不存在,v-show:元件佔用空間,只是不展示)
<el-tree v-if="treeSetData.editFlg" ref="tree" :key="treeSetData.tree_key" :data="treeSetData.treeData" node-key="id" :render-content="renderContent" :expand-on-click-node="false" :default-expand-all="treeSetData.defaultExpandAll" highlight-current @node-click="handleNodeClick" class="tree-style" ></el-tree> <el-tree v-else ref="tree" :key="treeSetData.tree_key" :data="treeSetData.treeData" node-key="id" :render-content="renderContent" :expand-on-click-node="false" :default-expand-all="treeSetData.defaultExpandAll" highlight-current class="tree-style" ></el-tree>
樹形元件的欄位說明我就不一一贅述了,可以通過element-ui的樹形元件官網檢視,但是我要單獨說明一下以下方法,
- render-content:自定義節點內容,renderContent:為方法名。
- @node-click:節點點選時呼叫,因為只有在非編輯狀態下才存在節點點選效果,因此該方法我只寫在了非編輯的樹形元件內
所需data說明
// 樹形結構所需資料 treeSetData:{ defaultExpandAll:true,// 是否預設展開 editFlg:true,// 是否是編輯狀態 treeData: [],// 樹形元件資料集 // 編輯樹形陣列內容 editList:[],// 刪除樹形資料陣列內容 deleteList:[],// 新增樹形資料陣列內容 addList:[],// 是否新增flg addNodeFlg:false,// 預設的id defaultId:5000,// 新增的最外層節點名稱 newName:'',tree_key: 0,},
說明一下最外層節點的新增方法,其實主要的核心思想是控制下方的輸入框以及按鈕的展示與否,然後點選確認按鈕之後,在原有的樹形元件data裡新增一條資料。
實現畫面
新增按鈕的html程式碼
<el-button type="text" @click="add_new_Area" class="button-style"><i class="el-icon-plus" style="margin-right:5px"></i>新增</el-button>
新增按鈕點選方法【add_new_Area】
add_new_Area() { this.treeSetData.addNodeFlg = true; },
文字框的程式碼片段
<el-row class="add_question" v-show="treeSetData.addNodeFlg"> <el-col :span="11" style="margin:0px 5px"> <el-input v-model="treeSetData.newName" placeholder="通行區域" size="mini"></el-input> </el-col> <el-col :span="12"> <el-button size="mini" type="primary" plain @click.stop="add_area_sure">確定</el-button> <el-button size="mini" type="warning" plain @click.stop="add_area_cancel">取消</el-button> </el-col> </el-row>
確認按鈕【add_area_sure】
add_area_sure() { // 新增節點資料,因為是最上層,所以預設父ID是pid,id的話是我初始化設定的【defaultId】的自加,大家自己在data中加一下【defaultId】欄位就可以了 const nodeObj = { id: this.treeSetData.defaultId++,name: this.treeSetData.newName,isEdit: false,children: [],pid:0 }; this.treeSetData.treeData.push(nodeObj); this.treeSetData.addNodeFlg = false; this.treeSetData.addList.push(nodeObj); },
取消按鈕【add_area_cancel】
add_area_cancel() { this.treeSetData.addNodeFlg = false; this.treeSetData.newName = ""; },
至此就可以實現最外層節點的添加了。
編aIyuRLzI輯狀態下的幾點增刪改的話,其實就是通過自定義節點內容的【renderContent】這個方法實現的,快下班了我就不一一說明了,有時間再補吧,先把主要程式碼提出來~
// 通行區域樹操作group node,renderContent(h,{ node,data,store }) { if(this.treeSetData.editFlg == false){ return ( <span class="tree-span"> <span>{this.showOrEdit(data)}</span> <div class="tree_node_op"> <i class="el-icon-edit" on-click={ev => this.nodeEdit(ev,store,data)} style="padding-left: 10px;"></i> <i class="el-icon-circle-plus" on-click={() => this.nodeAdd(node,data)} style="margin-left: 5px;"></i> <i class="el-icon-remove" on-click={() => this.nodeDelete(node,data)} style="margin-left: 5px;"></i> </div> </span> ); } else { return ( <span class="tree-span"> <span>{this.showOrEdit(data)}</span> <div class="tree_node_op"> </div> </span> ); } },// 節點編輯 showOrEdit(data) { if (data.isEdit) { return ( &lhttp://www.cppcns.comt;el-input type="text" value={data.name} on-blur={ev => this.edit_sure(ev,data)} size="mini" class="input-style" ></el-input> ); } else { return <span className="node_labe">{data.name}</span>; } },nodeEdit(ev,data) { data.isEdit = true; this.$nextTick(() => { const $input = ev.target.parentNode.parentNode.querySelector("input") || ev.target.parentElement.parentElement.querySelector("input"); !$input ? "" : $input.focus(); }); },// 確認編輯 edit_sure(ev,data) { const $input = ev.target.parentNode.parentNode.querySelector("input") || ev.target.parentElement.parentElement.querySelector("input"); if (!$input) { return false; } else { data.name = $input.value; data.isEdit = false; } // 修改編輯樹形資料的內容 let editFilter = this.treeSetData.editList.filter((item)=>item.id == data.id); if (editFilter.length == 0){ this.treeSetData.editList.push(data); } else { this.treeSetData.editList.forEach((item,i)=>{ if客棧(item.id == data.id) { this.treeSetData.editList[i].name = data.name; } }) } },// 增加節點 nodeAdd(node,data) { if (data.pid !== 0){ this.$message({type:'error',message:'通行區域最多隻能有兩級層次結構。'}); return false; } else { const newChild = { id: this.treeSetData.defaultId++,name: '新增的通行區域',isEdit:false,pid:data.id,children: [] }; if (!data.children) { this.$set(data,'children',[]); } data.children.push(newChild); this.treeSetData.addList.push(newChild); } },// 節點刪除 nodeDelete(node,data) { this.treeSetData.deleteList.push(data); const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex(d => d.id === data.id); children.splice(index,1); },
然後將上面處理完的資料(要增加的資料:addList,要修改的資料:editList,要刪除的資料:deleteList)整體提交給後臺去做處理就可以了,但是需要注意一下以下的幾種情況。
// 先新增,後修改的資料整合 this.treeSetData.addList.forEach((item,i)=>{ let editFilter = this.treeSetData.editList.filter((value)=>value.id == item.id); if(editFilter.length !== 0){ this.treeSetData.addList[i] = editFilter[0]; this.treeSetData.editList = this.treeSetData.editList.filter((value)=>value.id !== item.id); } }) // 先新增,後刪除的資料整合 this.treeSetData.deleteList.forEach((item,i)=>{ let addFilter = this.treeSetData.addList.filter((value)=>value.id == item.id); if(addFilter.length !== 0){ this.treeSetData.deleteList = this.treeSetData.deleteList.filter((value)=>value.id !== item.id); this.treeSetData.addList = this.treeSetData.addList.filter((value)=>value.id !== item.id); } }) // 先編輯,後刪除的資料整合 this.treeSetData.deleteList.forEach((item,i)=>{ let editFilter = this.treeSetData.editList.filter((value)=>value.id == item.id); if(editFilter.length !== 0){ this.treeSetData.editList = this.treeSetData.editList.filter((value)=>value.id !== item.id); } })
樹形元件樣式
<style lang="less">
.el-message-box {width: 450px;}
.button-style {padding: 0px}
.input-style {height: 15px;width: 140px;}
.through-panel-body {
padding-top:12px;
width: 100%;
display: flex;
.panel-area-left {
position: relative;
width: 360px;
border:2px solid rgba(240,240,1);
border-radius: 5px;
.head-title {
display:flex;justify-content: space-between;padding:10px 10px;
h5{border-left:solid 3px #FB8742;padding-left:5px;height: 20px;line-height:20px;font-size:16px;}
}
.area-tree {
widtwww.cppcns.comh: 100%;
.tree-style {
margin: 0px 0px 10px 10px;
height:88%;
overflow-y: auto;
}
.el-tree-node__content {
padding-left: 10px;display: flex;width: 100%;
.tree-span {
display: flex; width: 100%;
.tree_node_op {
margin-left: 10px;color: #D3D3D3;
}
}
}
}
.add_question {
margin: 10px 0px;
}
.foot-style{
padding-right:5px;
height: 40px;
text-align: right;
}
}
.panel-area-right {
margin-right: 5px;
width: 100%;
padding-left: 15px;
height: 100%;
.el-row {
width: 100%;
display: flex;
justify-content: space-between;
.located-class {
width: 50%;
}
.device-floor-class {
width: 50%;
display: flex;
justify-content: flex-end;
}
}
}
}
</style>
到此這篇關於實現樹形結構增刪改查的示例程式碼的文章就介紹到這了,更多相關vue 樹形結構增刪改查內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!