這篇文章主要為大家展示了“vue如何實現樹形結構增刪改查”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“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" ></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" > <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)} ></i>
<i class="el-icon-circle-plus" on-click={() => this.nodeAdd(node, data)} ></i>
<i class="el-icon-remove" on-click={() => this.nodeDelete(node, data)} ></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;
h6{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如何實現樹形結構增刪改查”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
