当前位置:   article > 正文

vue2中 elementUI tree树一键展开/关闭_element的tree设置展开和关闭

element的tree设置展开和关闭

代码实现如下:

  1. <template>
  2. <div>
  3. <el-button @click="handleCheckedTreeExpand">展开/折叠</el-button>
  4. <el-tree
  5. class="tree-border"
  6. :data="data"
  7. show-checkbox
  8. default-expand-all
  9. ref="tree"
  10. node-key="id"
  11. empty-text="加载中,请稍候"
  12. :props="defaultProps"
  13. ></el-tree>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20. // 展开状态
  21. isExpandAll: false,
  22. defaultProps: {
  23. children: "children",
  24. label: "label"
  25. },
  26. data: [{
  27. label: '一级 1',
  28. id: 1,
  29. children: [{
  30. id: 11,
  31. label: '二级 1-1',
  32. children: [{
  33. id: 111,
  34. label: '三级 1-1-1'
  35. }]
  36. }]
  37. }, {
  38. id: 2,
  39. label: '一级 2',
  40. children: [{
  41. id: 21,
  42. label: '二级 2-1',
  43. children: [{
  44. id: 211,
  45. label: '三级 2-1-1'
  46. }]
  47. }, {
  48. id: 22,
  49. label: '二级 2-2',
  50. children: [{
  51. id: 221,
  52. label: '三级 2-2-1'
  53. }]
  54. }]
  55. }, {
  56. id: 3,
  57. label: '一级 3',
  58. children: [{
  59. id: 31,
  60. label: '二级 3-1',
  61. children: [{
  62. id: 311,
  63. label: '三级 3-1-1'
  64. }]
  65. }, {
  66. id: 32,
  67. label: '二级 3-2',
  68. children: [{
  69. id: 321,
  70. label: '三级 3-2-1'
  71. }]
  72. }]
  73. }],
  74. }
  75. },
  76. methods: {
  77. // 展开/折叠事件
  78. handleCheckedTreeExpand(){
  79. this.isExpandAll = !this.isExpandAll
  80. let treeRef = this.$refs.tree
  81. let treeList = this.data
  82. this.TreeExpandOrFold(treeList, treeRef)
  83. },
  84. // 递归展开/折叠 树
  85. TreeExpandOrFold(treeList, treeRef){
  86. treeList.forEach((item,index)=>{
  87. treeRef.store.nodesMap[treeList[index].id].expanded = this.isExpandAll;
  88. if(item.children && item.children.length>0){
  89. let newTreeRef = treeRef.store.nodesMap[treeList[index].id]
  90. this.TreeExpandOrFold(item.children, newTreeRef)
  91. }
  92. })
  93. }
  94. }
  95. }
  96. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/830681
推荐阅读
相关标签
  

闽ICP备14008679号