elementui tree component getNode analysis

elementui tree component getNode analysis
https://blog.csdn.net/CSTGxun/article/details/119885129
When we call the getNode method, what is actually executed is the method shown in the figure above. First, we judge whether the data object is passed in a key value or a node object. If a node object is passed in, we can directly return the data, and then judge the incoming data. Is it an object, if it is a key value, find the corresponding data from nodesMap, if it is an object, execute getNodeKey, where this points to TreeStore, which stores the configuration information of the tree, as can be seen from the following figure, this.key is passed here. The input is a string id.

I want to get the node using getNode when using the tree component of element-ui, I use the getNode() method to get the node, the method passed in parameters is node The node id can be obtained through the method to initialize the node, but the lazy loaded node cannot be obtained. After browsing the document, I found that the parameter passed in by getNode is the key value or the node node instead of the id. The id of the node is automatically generated by the component (I can The initialization node is obtained by id because the id and key values ​​in the project are the same).

Before going through the documentation I took a look at element's source code , the following is part of the source code analysis.

Source code analysis: When we call the getNode method, the method in the above figure is actually executed. First, we judge whether the data object is passed in a key value or a node object. If a node object is passed in, the data can be returned directly, and then the data is judged. Whether the entered data is an object, if it is a key value, find the corresponding data from nodesMap, if it is an object, execute getNodeKey, where this points to TreeStore, which stores the configuration information of the tree, as shown in the figure below, this is here .key passes in a string id.

 

getNodeKey receives the key and data. From the above, we can know that the key is a string id. If the data is an incoming non-Node object, if we do not set the node-key property in the tree component, the if statement will be executed here to return directly data[NODE_KEY] is an undefined value, the key received in the getNode() method is an undefined, and an undefined or undefined is taken from the nodesMap, and finally returns null, which is why we get null when we call the getNode method in the component The reason for the value, if we pass in the object, we can get a value through data['id'], and then we can get the corresponding data from nodesMap.

 

demo code:

  1. <template>
  2. <div>
  3. <!-- node-key="id"-->
  4. <el-tree
  5. ref="myTree"
  6. :load="loadNode"
  7. :data="treeData"
  8. node-key="id"
  9. lazy
  10. @node-click="handleNodeClick"
  11. show-checkbox>
  12. </el-tree>
  13. <el-button @click="getNode">get node</el-button>
  14. </div>
  15. </template>
  16. <script>
  17. import {treeData} from "./index.js";
  18. export default {
  19. name: "index.vue",
  20. data() {
  21. return {
  22. treeData: [],
  23. nodeId: 0,
  24. myNode: null
  25. };
  26. },
  27. mounted() {
  28. this.treeData = treeData;
  29. },
  30. methods: {
  31. handleCheckChange(data, checked, indeterminate) {
  32. console.log(data, checked, indeterminate);
  33. },
  34. handleNodeClick(data, node) {
  35. this.nodeId = node.id;
  36. this.myNode = node;
  37. console.log( node);
  38. },
  39. loadNode(node, resolve) {
  40. if (node.level === 0) {
  41. return ;
  42. // return resolve([{ name: 'region' }]);
  43. }
  44. if (node.level < 3){
  45. return resolve(node.data.children);
  46. }else {
  47. if (node.level == 3){
  48. let pomise = [
  49. {
  50. id: 1,
  51. label: 'Pinghu Jiedao',
  52. }
  53. ];
  54. node.data.children = pomise;
  55. resolve(pomise)
  56. }
  57. }
  58. },
  59. getNode(){
  60. console.log(this.$refs.myTree.getNode({
  61. id: 1000,
  62. label: 'Guangdong Province',
  63. children: [
  64. {
  65. id: 1100,
  66. label: 'Shenzhen',
  67. children: [
  68. {
  69. id: 1110,
  70. label: 'Longgang District'
  71. }
  72. ]
  73. }
  74. ]
  75. }))
  76. }
  77. },
  78. }
  79. </script>
  80. <style scoped>
  81. </style>

js:

  1. export const treeData = [
  2. {
  3. id: 1000,
  4. label: 'Guangdong Province',
  5. children: [
  6. {
  7. id: 1100,
  8. label: 'Shenzhen',
  9. children: [
  10. {
  11. id: 1110,
  12. label: 'Longgang District'
  13. }
  14. ]
  15. }
  16. ]
  17. },
  18. {
  19. id: 2000,
  20. label: 'Hunan Province',
  21. children: [
  22. {
  23. id: 2100,
  24. label: 'Changsha City',
  25. children: [
  26. {
  27. id: 2110,
  28. label: 'XXX Area',
  29. }
  30. ]
  31. }
  32. ]
  33. },
  34. ]

 

Posted by railgun on Sun, 08 May 2022 18:02:51 +0300