Vue uses el-tree lazy loading to implement the add, delete, modify and query functions
|
About the tree display of Vue, the project is used: the effect diagram is displayed asynchronously in the form of a tree:
Found the official documentation of element-ui, el-tree. （Address: https://element.eleme.cn/#/zh-CN/component/tree ） Project requirements: Display in lazy loading form, the directory needs to have new editing and deletion operations as well as refresh tree structure after operation according to the requirements So let's get started now. one,
Lazy loading: Lazy loading of Tree is controlled by one attribute: lazy. To use lazy, you need to use load to load data for rendering tree principle: initialization triggers the load function to load the initial data first, and by clicking a node, trigger the load function to load the child nodes under this node. two,
Custom node: add an action button after the node
There are examples on the official website for simple examples ** Mainly talk about updating nodes ** // refreshNode: the node to be refreshed; newNodeData: new child node data refreshNode.splice(0, refreshNode.length); refreshNode.doCreateChildren(newNodeData); Understand this:
menuNodeClick(data, node, treeNode) {
this.selectNodeData = data
this.selectNode = node
}2>. After the node operation, refresh the node. You can choose to refresh the current node (node) or refresh the parent node of the current node (node.parent) according to different scenarios:
/**
* Refresh node data * @node [node/Object]: refresh node node, refresh all nodes below node * @type [String]: node type, 'node' means node is the node information Node of the tree; 'data' means node is the data in the node information of the tree */
refreshTreeNode(node, type) {
let refreshNode;
// Get the child node of the node to be updated if(type === 'node') {
refreshNode = node.childNodes
}else if(type === 'data') {
let getNode = this.$refs.tree.getNode(node)
refreshNode = getNode.childNodes
}
// Delete the original child node refreshNode.splice(0, refreshNode.length);
//Re-request data and update node this.requestTreeNode(node)
}3.Select box checkBox: If there is a selection box during lazy loading, the data with the selection box needs to be loaded, and then checked through the attribute default-checked-keys , and the expanded nodes are set through default-expanded-keys. 4. Single choice:
// Set the current node to select this.$refs.tree.setCurrentKey(
this.selectNodeData[this.nodeKey]
) Regardless of single selection or multiple selection, when it is loaded for the first time, the background needs to provide not only the selected information, but also all the node information of the branch where the selected node is located, and assign it to default-expanded-keys so that the branch where the node is located can be expanded from the top to the selection items. But often, the backend may only provide information about the selected value, which requires the frontend to encapsulate the data itself and obtain the branch information that needs to be expanded. Different methods are used according to different data formats
This format of data can satisfy both the situations of [click one layer, load one layer] and [click one layer, load multiple layers of child nodes of the clicked layer]. The first case does not require data processing; in the second case, a field needs to be injected into each piece of data to associate the parent and child nodes, and then the data is encapsulated into the format required by el-tree, and a recursive function is used to integrate the data (assuming that the associated field is parentId, nodeKey is id, the child node field of the tree is children, and multiple layers of child nodes with id 'N' need to be loaded) (Note: recursive functions will affect performance, so use them with caution) 2). Multi-layer data (assuming the attribute name of the child node is children)
[
{
...,
children: [
{
...,
children: [
{
...,
children: [...],
},
{
...,
children: [...],
}
]
},
{
...,
children: [
{
...,
children: [...],
}
]
}
]
}
] Data in this format can be used in both single-layer and multi-layer scenarios and does not require any processing. Lazy loading example:
<el-tree
:data="treeData"
:props="defaultProps"
:load="loadNodeTree"
@node-click="handleNodeClick"
lazy
:expand-on-click-node="false"
:default-expanded-keys="['1']"
node-key="id"
:highlight-current="true"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span class="treeLeft">{{ node.label }}</span>
<span class="treeRight">
<i
v-if="node.level === 1"
@click="() => appendNode(node, data)"
class="el-icon-plus"
style="color: blue"
></i>
<!--Add group-->
<!-- The root node does not need to be deleted or renamed-->
<i
v-if="data.id !== 0"
@click="() => deleteNode(node, data)"
class="el-icon-delete"
style="color: red"
></i>
<!--Delete group-->
<i
v-if="data.id !== 0"
@click="() => editNode(node, data)"
class="el-icon-edit"
style="color: blue"
></i>
<!--Rename group-->
</span>
</span>
</el-tree> vue:
// Tree menu treeData: [], // Tree node defaultProps: { // Modify el-tree default data array parameters children: 'children',
label: 'name',
id: 'id',
parentId: 'parentId',
isLeaf: 'leaf' // Specifies whether the node is a leaf node, which is only valid when the lazy attribute is specified}, methods:
// Load tree data loadNodeTree(node, resolve) {
const that = this
if (node.level === 0) {
that.loadtreeData(node, resolve)
} else if (node.level === 1) {
that.getChildByList(node, resolve)
}
},
// Get loadtreeData is the parent node data, getChildByList is to asynchronously get the child node data loadtreeData(nodeData, resolve) {
const dataType = {
pageIndex: 1,
pageSize: 100000
}
getAlltype(dataType)
.then(res => {
const rootChildren = []
if (res.code === 200) {
const data = res.data.list
data.map(item => {
rootChildren.push({
name: item.typeName,
parentId: '',
id: item.id,
leaf: false,
children: []
})
})
//If resolve has content, it will be lazy loaded and queried, otherwise it will be modified if (resolve) {
resolve(rootChildren)
} else {
nodeData.childNodes = []
nodeData.doCreateChildren(rootChildren)
}
} else {
resolve([])
}
})
},
// Get child node request getChildByList(nodeData, resolve) {
var _parentID = nodeData.data.id
const typeSpec = {
typeId: _parentID,
pageIndex: 1,
pageSize: 100000
}
getAlltypeSpec(typeSpec).then(res => {
const rootChildren = []
if (res.code === 200) {
const data = res.data.list
data.map(item => {
rootChildren.push({
name: item.description,
parentId: item.typeId,
id: item.id,
leaf: true,
children: []
})
})
if (resolve) {
resolve(rootChildren)
} else {
nodeData.childNodes = []
nodeData.doCreateChildren(rootChildren)
}
} else {
return false
}
}).catch(err => {
console.log(err)
})
},
// Node click event handleNodeClick(data, node) {
this.addnode = node
this.adddata = data
if (node.level === 1) {
this.queryForm.typeId = node.data.id
this.queryForm.typeSpecId = ''
} else if (node.level === 2) {
this.queryForm.typeId = node.data.parentId
this.queryForm.typeSpecId = node.data.id
}
this.query()
},Node operation: add node, modify node, delete node (operate your own node to pass the parent node information to find your current node, operate the child node to pass the current node conclusion: parent node operates child node)
// Tree node adds type specification appendNode(node, data) {
this.addTypesSpec = {
typeName: node.data.name,
typeId: node.data.id
}
this.createTypesSpecDialog = true
},
// Tree type modification editNode(node, data) {
const typeId = node.data.parentId
// Level 1 type if (node.level === 1) {
this.editTypesDialog = true
this.editTypes = {
id: node.data.id,
typeName: node.data.name
}
} else {
this.editTypesSpecDialog = true
this.getSelectTypes()
// this.editTypesSpec = Object.assign({}, node.data)
this.editTypesSpec = {
typeId: typeId,
id: node.data.id,
description: node.data.name
}
}
},
// Tree type deletion deleteNode(node, data) {
// Level 1 type if (node.level === 1) {
this.$msgbox.confirm('This operation will delete the asset type data, do you want to continue?', 'Delete prompt', {
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
typeDel(node.data.id).then(
resp => {
this.$message('Deleted successfully')
this.query()
this.loadNodeTree(node.parent)
},
err => {
console.log('err', err)
}
)
}).catch(() => {
this.$message.error('Cancelled')
})
} else {
this.$msgbox.confirm('This operation will delete the asset type specification data, do you want to continue?', 'Delete prompt', {
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
typeSpecDel(node.data.id).then(
resp => {
this.loadNodeTree(node.parent)
this.$message('Deleted successfully')
this.query()
},
err => {
console.log('err', err)
}
)
}).catch(() => {
this.$message.error('Cancelled')
})
}
},After the node is triggered, a pop-up box is displayed. The normal pop-up box is added, modified, or deleted. However, after submitting the background request and returning the successful operation, the tree structure needs to be loaded again. Therefore, the loading tree method is called again here. The passed node can be saved when the tree is triggered and clicked. My method is handleNodeClick. This method saves the clicked node regardless of whether it is modified, added, or deleted.
this.$message('Edit successful')
this.loadNodeTree(this.addnode.parent)1. Set expansion and contraction
if (!node.expanded) {
node.expand();
}else {
node.collapse();
}2. Get the parent node node.parent If you can understand it, just read it. The code can be optimized, but I don't have much time recently. If you can't understand it, it's ok as long as you can understand this logic. See you next time This is the end of this article about Vue using el-tree lazy loading for additions, deletions, modifications and queries. For more related Vue el-tree lazy loading 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:
|
<<: How to change apt-get source in Ubuntu 18.04
>>: Analysis of common usage examples of MySQL process functions
Recommend
Implementation of Nginx+ModSecurity security module deployment
Table of contents 1. Download 2. Deployment 1.Ngi...
A brief discussion on JavaScript throttling and anti-shake
Table of contents Throttling and anti-shake conce...
Vue implements Tab tab switching
This article example shares the specific code of ...
Vendor Prefix: Why do we need a browser engine prefix?
What is the Vendor Prefix? Vendor prefix—Browser ...
js to achieve cool fireworks effect
This article shares the specific code for using j...
js implements random roll call
This article shares the specific code of js to im...
Importance of background color declaration when writing styles
As the title says, otherwise when the page is revi...
Example code for implementing an Upload component using Vue3
Table of contents General upload component develo...
How to change the domestic image source for Docker
Configure the accelerator for the Docker daemon S...
Detailed explanation of how to use Tomcat Native to improve Tomcat IO efficiency
Table of contents Introduction How to connect to ...
How to set a dotted border in html
Use CSS styles and HTML tag elements In order to ...
Summary of 6 skills needed to master web page production
It has to be said that a web designer is a general...
How to solve the problem of zabbix monitoring causing Chinese garbled characters in the graphical interface due to PHP problems
Solve the problem of Chinese garbled characters i...
Briefly describe the installation of influxDB distributed time series database and related operations in Docker
Introduction to influxDB influxDB is a distribute...
MySQL column to row conversion, method of merging fields (must read)
Data Sheet: Column to row: using max(case when th...