Simple not to say, mainly according to the following picture analysis:
1. Ref = “tree”; If you want to use some of the tree built-in methods, such as the method to get a node, which nodes are selected, etc., the methods in methods are this.$ref. Method name, you wouldn’t get it if you didn’t put this code on the tree tag.
2. Show -checkbox tree
3.@check-changes is the callback of the node when the status of the node changes. There are three parameters, including the corresponding object of the node in the array passed to the data property, whether the node itself is selected, and whether there is a selected node in the node’s subtree. The second parameter is highlighted: If the node itself is selected, you can use it to determine the selected status of the node you click. Some functions such as your function need to pass the status of each node of the tree to the background interface. You can convert the data of the node you click to the parameters required by the interface.
4.@check is triggered when the check box is clicked. There are two parameters, in order: CheckedNodes, checkedKeys, halfCheckedNodes, and halfCheckedKeys are the objects corresponding to the node in the array passed to the data property and the current selected state objects of the tree.
@check-changes and @check are used together. In order to match the parameters required by the background interface, I need to take the second parameter from @check-changes and convert it into the parameter I need to give to the background
In the picture above, when you check 11, the @check-changes returns the first argument, data, which returns two times. The first time it returns data for the 11 node object, and the second time it returns data for the parent node to which it is associated, which you can no longer value in some circumstances. It’s better to get the data you click on, but it depends on how your functionality and backend work together. So I’m going to use @check’s first argument data to get the data I want. @check’s first argument will only return the node you clicked on, not the data of its parent or subclass
5. : data The data to be displayed is an array, node-key. Each tree node is used as a unique identifier attribute.
6. Default-checked -keys Specifies the array of keys of the selected node by default. Check -strictly specifies whether the parent and child are strictly not associated with each other when the check boxes are displayed
Said this check strictly, when it is false, it will be strictly enforced parent-child relationships, for example, the strict parent-child relationships, when subclasses have not been selected item, the parent will be half the selected state, like a rung above the blue, said in the parent class has a subclass is selected, that is the parent class will have three status, check, When check-strictly is true, the parent class will only have checked and unchecked states. Generally speaking, our functional modules are strictly parent-child functions, both in terms of page aesthetics and logic.
7. Default-checked -keys puts the array selected by default. For example, if I’m requesting the data return array, and MY node-key is set to ID, then my raw array (: data) is going to put the IDS of all the data I fetch from the interface. For the default-checked-keys array, you need to put in the ids that match the selected state.
8. Note that the strict implementation of parent-child relationships, is the parent class when you selected, even if the subclass is not selected, then the parent class the following subclasses will be selected (especially checkboxes form on a page, when subclasses are not selected, the parent class is selected, a subclass of effect is selected), so will you write a method to judge and display your page data. Also, let’s say every item has an isSelect attribute. If I’m checked, isSELECT is true; if I’m not checked, it’s false; and if the parent’s ISSELECT is null, it’s half-checked. If a parent of the default-checked-keys array is null, it does not matter. If the parent of the default-checked-keys array is null, the parent of the default-checked-keys array is null. To summarize, the data ID in your default-checked-keys determines whether it is selected or not, and you (a property in the: data parent class to show all, half, or unselected).