Vue implements the sample code of adding, deleting, modifying and checking the tree structure
|
In fact, many companies have functions similar to the user permission tree. I just wrote a tree structure of additions, deletions, and modifications recently. I would like to share it with you here. If there is anything unreasonable, please comment and I will optimize it as soon as possible. Attach the effect picture first. This is when Edit is not clicked. The product requirement is to select a node and obtain the device data corresponding to the node, so the initial page looks like the following.
This is the edit button of the node displayed after clicking Edit
Click the top add button to display the add screen of the outermost parent node
Modify the node name
Because our requirements are two states: editing and non-editing, I used two tree components and controlled them through v-if. (v-if: the component does not exist, v-show: the component takes up space but is not displayed)
<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>
I will not go into detail about the fields of the tree component. You can view them on the element-ui tree component official website, but I will explain the following methods separately.
Required data description
// Data required for the tree structuretreeSetData:{
defaultExpandAll:true, // Whether to expand by default editFlg:true, // Whether it is in editing state treeData: [], // Tree component data set // Edit tree array content editList:[],
// Delete the contents of the tree data array deleteList:[],
// Add tree data array content addList:[],
// Whether to add flg
addNodeFlg:false,
//Default id
defaultId:5000,
// Newly added outermost node name newName:'',
tree_key: 0,
},
Let me explain how to add the outermost node. In fact, the core idea is to control the display of the input box and button below, and then add a new data to the original tree component data after clicking the confirmation button. Realization screen
Add button html code <el-button type="text" @click="add_new_Area" class="button-style"><i class="el-icon-plus" style="margin-right:5px"></i>Add</el-button> Add button click method [add_new_Area]
add_new_Area() {
this.treeSetData.addNodeFlg = true;
},
Code snippet for textbox
<el-row class="add_question" v-show="treeSetData.addNodeFlg">
<el-col :span="11" style="margin:0px 5px">
<el-input v-model="treeSetData.newName" placeholder="Passage area" size="mini"></el-input>
</el-col>
<el-col :span="12">
<el-button size="mini" type="primary" plain @click.stop="add_area_sure">OK</el-button>
<el-button size="mini" type="warning" plain @click.stop="add_area_cancel">Cancel</el-button>
</el-col>
</el-row>
Confirm button [add_area_sure]
add_area_sure() {
// Add node data. Because it is the top layer, the default parent ID is pid. The id is the self-addition of the [defaultId] I set in the initialization. You can add the [defaultId] field in the data by yourself. 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);
},
Cancel button [add_area_cancel]
add_area_cancel() {
this.treeSetData.addNodeFlg = false;
this.treeSetData.newName = "";
},
At this point, the outermost node can be added. The additions, deletions and modifications in the editing state are actually implemented through the [renderContent] method of the custom node content. I will not explain them one by one as I am about to get off work. I will make up for it when I have time. First, I will present the main code~
// Pass area tree operation 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>
);
}
},
// Node editing 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();
});
},
// Confirm edit 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;
}
// Modify the content of the edit tree data 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;
}
})
}
},
// Add node nodeAdd(node, data) {
if (data.pid !== 0){
this.$message({type:'error',message:'The access area can have at most two levels of hierarchy.'});
return false;
} else {
const newChild = { id: this.treeSetData.defaultId++, name: 'Newly added access area', isEdit:false, pid:data.id, children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
this.treeSetData.addList.push(newChild);
}
},
// Node deletion 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);
},
Then submit the processed data (data to be added: addList, data to be modified: editList, data to be deleted: deleteList) to the background for database processing, but you need to pay attention to the following situations.
// Add first, then modify the data integration 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);
}
})
// First add, then delete the data integration 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);
}
})
// First edit, then delete data integration 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);
}
})
Tree component style
<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>
This is the end of this article about the sample code for Vue to implement tree structure addition, deletion, modification and query. For more relevant Vue tree structure addition, deletion, modification and query content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
>>: Solution to the garbled code problem in MySQL 5.x
Recommend
Detailed examples of replace and replace into in MySQL into_Mysql
MySQL replace and replace into are both frequentl...
How to use CSS to achieve data hotspot effect
The effect is as follows: analyze 1. Here you can...
Summary of some tips for bypassing nodejs code execution
Table of contents 1. child_process 2. Command exe...
How to analyze MySQL query performance
Table of contents Slow query basics: optimizing d...
mysql delete multi-table connection deletion function
Deleting a single table: DELETE FROM tableName WH...
Mysql example of splitting into multiple rows and columns by specific symbols
Some fault code tables use the following design p...
How to uninstall MySQL cleanly (tested and effective)
How to uninstall Mysql perfectly? Follow the step...
The best way to start a jar package project under Centos7 server
Preface Everyone knows how to run a jar package o...
The difference between where and on in MySQL and when to use them
When I was writing join table queries before, I a...
Three ways to implement text color gradient in CSS
In the process of web front-end development, UI d...
Detailed explanation of the basic implementation principle of MySQL DISTINCT
Preface DISTINCT is actually very similar to the ...
Detailed explanation of table_open_cache parameter optimization and reasonable configuration under MySQL 5.6
1. Introduction table_cache is a very important M...
Summary of Linux file directory management commands
touch Command It has two functions: one is to upd...
CSS style control to achieve IE submission form record history click return information is still there
It is mainly a CSS style control and a META tag; C...
Example of Form action and onSubmit
First: action is an attribute of form. HTML5 has d...