Hello! Dear friends of the Nuggets, I am # Touch fish small public ju, yesterday wrote a CSS+JS implementation of earthen Mid-Autumn festival special effects technical article progress so a drop, some people like and comment; Hope you can give more support; Thank you very much! Today we are going to learn how to use the Element UI Tree component!
The text is about to begin
This is taking the selected value and concatenating it into a string and passing it to the background
First get the background data to process into the data structure of the component
Ban on selected
if(arr[i]id =='15'){
arr[i].disabled = true
}
Copy the code
Get the selected value ID through this event
This $refs. Tree. GetCheckedNodes getCheckedNodes () to print out the data: If the node is selectable (that is, 'show-checkbox' is' true '), then the array parameters of the currently selected nodes are returned :(leafOnly, includeHalfChecked) Accept two Boolean arguments, 1. Whether only leaf nodes, default 'false' 2. Whether half-selected nodes are included, default 'false'Copy the code
handleNodeClick(data) { this.nodeList = []; if (this.$refs.tree.getCheckedNodes()) { for (let i = 0; i < this.$refs.tree.getCheckedNodes().length; i++) { if (this.$refs.tree.getCheckedNodes()[i].pid ! = 0) { this.nodeList.push(this.$refs.tree.getCheckedNodes()[i].pid); } this.nodeList.push(this.$refs.tree.getCheckedNodes()[i].id); }} check is triggered when the check box is clicked; Parameter: a total of two parameters, successively: the object corresponding to the node in the array passed to the 'data' property, and the current selected state object of the tree, including four properties checkedNodes, checkedKeys, halfCheckedNodes, and halfCheckedKeysCopy the code
The id we get here is usually duplicate parent ids, so we need to filter out duplicate ids;
for (var i = 0; i < this.nodeList.length; i++) {
if (this.nodeData.indexOf(this.nodeList[i]) == -1) {
this.nodeData.push(this.nodeList[i]);
}
}
var nodeDataList = this.nodeData.join(",");
Copy the code
Get the background data to reproduce and edit the submitted data
The data returned in the background looks like this
Rules: "16,17,18,20,21,22"Copy the code
Needs to be processed into an array structure
var ruleList = res.data.rules.split(',');
var ruleListsArr = [];
var ruleArr = [];
for (var i = 0; i < ruleList.length; i++) {
ruleArr.push(ruleList[i]);
var obj = {};
obj.id = ruleList[i];
ruleListsArr.push(obj);
}
Copy the code
The data structure after processing is as follows
The Mounted function is called to set the selected node
SetTimeout (() => {// wait for the component to generate init; this.$refs.tree.setCheckedNodes(ruleListsArr); SetCheckedNodes: Description: Sets the currently selected nodes. To use this method, you must set the node-key property parameter :(Nodes) to receive an array of data for the selected nodesCopy the code
If the data is not filtered, then the selected effect has the parent ID and the selected z child ID will all be selected
let checkedArr = []; for (let i = 0; i < this.$refs.tree.getCheckedNodes().length; i++) { checkedArr.push(this.$refs.tree.getCheckedNodes()[i].id); } let array = ruleArr.map(Number); let filterArr = checkedArr.filter(function(val) { return array.indexOf(val) == -1; }); for (let k = 0; k < filterArr.length; k++) { this.$refs.tree.setChecked(filterArr[k], false); }}, 200);Copy the code
After filtering, only the ones I selected are displayed
Conclusion:
This is the summary of my previous project experience; Any wrong place welcome advice; Well, that’s the end of the article; Thank you very much for reading.