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 = "";
},
至此就可以實現最外層節點的添加瞭。
編輯狀態下的幾點增刪改的話，其實就是通過自定義節點內容的【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 (
<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, store, 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,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 {
width: 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實現樹形結構增刪改查的示例代碼的文章就介紹到這瞭,更多相關vue 樹形結構增刪改查內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- vue中的el-tree @node-click傳自定義參數
- 基於Vue技術實現遞歸組件的方法
- Vue Element-ui實現樹形控件節點添加圖標詳解
- Vue使用el-tree 懶加載進行增刪改查功能的實現
- vue中使用elementui實現樹組件tree右鍵增刪改功能