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.