Element tree control: invalid to modify current node key

fairy1674 2021-04-07 17:54:23
element tree control invalid modify


Business scenario

Our online network disk project , Pop up window to achieve a directory tree , Used to select the destination path of the file to move .
 Insert picture description here

Demand analysis

  1. When you click on a node , Select the node
    1.1 If there are children under the node , At the same time, the deployment is triggered ( Or put it away )
  2. Click the tree node icon on the left , When you expand a node , Select the node
  3. Click the tree node icon on the left , When you retract a node , Select the node

All in all , Just click on the line of a node , Select this node

Record of stepping on the pit

stay Element In the component ,Tree Tree control is a relatively complex one , But the document is very brief , Most of the API No examples are used . Tell me about my problems .

  • Implementation requirements 1, because UI The students didn't give the check box , So configure check-on-click-node Parameter implementation Click to select ; Use at the same time node-click Events to monitor . But the self-test found that , When you click on the node on the left to expand / On the stow icon , Not trigger click event .
  • To meet the requirements 2, It needs to be configured additionally node-expand Event monitoring
  • Again , Implementation requirements 3, It needs to be configured additionally node-collapse Event monitoring

such , We have taken into account the three trigger conditions for selecting a node . Let's assign values data: currentNodeKey, Save the... Of the currently selected node ID, And reflect the highlight effect of the selected state

  • current-node-key( The currently selected node )
    There's a problem with this parameter : If in data Define the initial value in , This can be achieved id The default highlight effect of the corresponding node . But if use this.currentNodeKey = xx Change the value again , No change .
  • setCurrentKey( adopt key Set the current selected state of a node , To use this method, you must set node-key attribute )
    Continue to look at the document , To find the Tree Example method . First get Tree Instance calls the method again , Although the implementation of the modification of the selected state and highlight effect , But it wasn't modified responsively currentNodeKey Value .

in other words , These two configurations need to exist at the same time to achieve a complete selection effect . One changed currentNodeKey value , The selected style has not changed ; A style effect that changes the selected state , The selection value doesn't change .

Anti human, do you have ???

ok , Anyway element No more maintenance , Let's use it together . Test the actual effect of these configurations , You can fill the hole happily , It's also very simple , monitor currentNodeKey Change in value , Call again setCurrentKey The method is ok .

Key code

<template>
<div>
...
<el-tree ref="my-tree" :data="treeData" node-key="id" highlight-current check-on-click-node :current-node-key="currentNodeKey" @node-click="handleNodeClick" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" ></el-tree>
...
</div>
</template>
<script>
export default {

watch: {

currentNodeKey(id) {

// Tree Internal use Node Type object to wrap the data passed in by the user , Used to save the state of the current node . It can be used $refs obtain Tree example 
if (id.toString()) {

this.$refs["my-tree"].setCurrentKey(id);
} else {

this.$refs["my-tree"].setCurrentKey(null);
}
}
},
data() {

return {

treeData: [],
currentNodeKey: "" // The currently selected node ( Move / Copy to the destination folder id)
};
},
methods: {

// Callback when the node is clicked 
// There are three parameters , In turn : Pass to data The object corresponding to the node in the array of property 、 Node corresponding Node、 Node component itself 
handleMoveCopyNodeClick(data) {

this.currentNodeKey = data.id;
},
// Events triggered when a node is expanded 
// There are three parameters , In turn : Pass to data The object corresponding to the node in the array of property 、 Node corresponding Node、 Node component itself 
handleMoveCopyNodeExpand(data) {

this.currentNodeKey = data.id;
},
// Events triggered when a node is shut down 
// There are three parameters , In turn : Pass to data The object corresponding to the node in the array of property 、 Node corresponding Node、 Node component itself 
handleMoveCopyNodeCollapse(data) {

this.currentNodeKey = data.id;
},
...
}
};
</script>

Additional explanation

Implementation is not perfect . If the node you click has children , Will trigger at the same time node-click and node-expand / node-collapse event , Cause redundant calls .
If the event handler has side effects other than assignment , Can cause unexpected bug, If you have this requirement, please add conditions to judge .

Element The website links

Element Tree Component official documentation

版权声明
本文为[fairy1674]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/04/20210407174016635s.html

  1. 大前端
  2. JavaScript概述,建议收藏
  3. Big front end
  4. JavaScript overview, suggest collection
  5. 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之业务数据增删改查(七)
  6. 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之docker部署(八)
  7. 2021必修 CSS架构系统精讲
  8. "Free and open source" front end spa project crudapi background management system based on Vue and Quasar
  9. "Free and open source" front end spa project based on Vue and Quasar
  10. 2021 required CSS architecture system
  11. IT兄弟连 HTML5教程 多媒体应用 HTML图像地图
  12. It brothers HTML5 tutorial multimedia application HTML image map
  13. bootstrap 的显示和隐藏
  14. 你不容错过的babel-plugin-import史上最全源码详解!
  15. 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表关系管理(六)
  16. Show and hide bootstrap
  17. You can't miss the most complete source code in the history of Babel plugin import!
  18. "Free and open source" front end spa project crudapi background management system based on Vue and Quasar
  19. 基于vue和jsplumb的工作流编辑器开发(二)
  20. Development of workflow editor based on Vue and jsplug (2)
  21. 01_Nginx下载安装
  22. Spring Boot + Vue3 前后端分离 实战wiki知识库系统
  23. 01_ Download and install nginx
  24. Spring boot + vue3 front end and back end separation practical wiki knowledge base system
  25. vue实现tab选项卡
  26. 【vue】v-for倒序显示/JSON数据倒序
  27. 【vue】三种获取input值的写法
  28. 【vue】class、style的用法
  29. 「开源免费」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表单设计器(五)
  30. VSLAM前端:双目极线搜索匹配
  31. VSLAM前端:金字塔光流跟踪算法
  32. Vue realizes tab
  33. VSLAM前端:图像特征提取
  34. [Vue] V-for reverse display / JSON data reverse
  35. 独家对话阿里云函数计算负责人不瞋:你所不知道的 Serverless
  36. Three ways to get input value
  37. The usage of class and style
  38. "Open source and free" dynamic form designer of crudapi background management system of front end spa project based on Vue and Quasar (5)
  39. VSLAM front end: binocular epipolar search matching
  40. VSLAM front end: Pyramid optical flow tracking algorithm
  41. VSLAM front end: image feature extraction
  42. Exclusive dialogue with the person in charge of Alibaba cloud function computing: what you don't know about serverless
  43. 「开源免费」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之序列号自定义组件(四)
  44. "Open source and free" serial number customization component of crudapi background management system of front end spa project based on Vue and Quasar (4)
  45. JavaScript 相似度排序
  46. Springboot项目搭建(前端到数据库,超详细)
  47. Less than 150 lines of code to write a python version of the snake
  48. 02_Nginx部署服务
  49. vue 快速入门 系列 —— vue 的基础应用(上)
  50. JavaScript similarity ranking
  51. 基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之布局菜单嵌套路由(三)
  52. Springboot project construction (front end to database, super detailed)
  53. 02_ Nginx Deployment Services
  54. vue 快速入门 系列 —— vue 的基础应用(上)
  55. Vue quick start series basic application of Vue
  56. Layout menu nested routing of front end spa project crudapi background management system based on Vue and Quasar (3)
  57. Vue quick start series basic application of Vue
  58. 一个好用的Visual Studio Code扩展 - Live Server,适用于前端小工具开发
  59. 基于Vue和Quasar的前端SPA项目实战之用户登录(二)
  60. css常用选择器总结