当前位置:   article > 正文

elment 中tree组件展开所有和收缩所有节点_el-tree展开所有节点

el-tree展开所有节点

 设置默认展开:     default-expanded-keys="openTree"

openTree 是个数组,例如这样写:default-expanded-keys="[2, 3]"

此时必须设置 node-key,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的,我这里是id

可以用在知道多少层子集或者不知道多少层子集的情况

效果如下:

 

  1. <el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick" node-key="id" :default-expanded-keys="openTree">
  2. <span class="custom-tree-node" slot-scope="{ node, data }">
  3. <span>
  4. {{data.label }}
  5. </span>
  6. </el-tree>
  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. treeList: [
  6. {
  7. id: 1,
  8. label: '一级 1',
  9. children: [
  10. {
  11. id: 4,
  12. label: '二级 1-1',
  13. children: [
  14. {
  15. id: 9,
  16. label: '三级 1-1-1',
  17. children: [
  18. {
  19. id: 41,
  20. label: '四级 1-1-1',
  21. children: [
  22. {
  23. id: 51,
  24. label: '五级 1-1-1',
  25. children: [
  26. {
  27. id: 61,
  28. label: '六级 1-1-1'
  29. }
  30. ]
  31. }
  32. ]
  33. },
  34. {
  35. id: 42,
  36. label: '四级 1-1-2'
  37. }
  38. ]
  39. },
  40. {
  41. id: 10,
  42. label: '三级 1-1-2'
  43. }
  44. ]
  45. }
  46. ]
  47. },
  48. {
  49. id: 2,
  50. label: '一级 2',
  51. children: [
  52. {
  53. id: 5,
  54. label: '二级 2-1'
  55. },
  56. {
  57. id: 6,
  58. label: '二级 2-2'
  59. }
  60. ]
  61. },
  62. {
  63. id: 3,
  64. label: '一级 3',
  65. children: [
  66. {
  67. id: 7,
  68. label: '二级 3-1'
  69. },
  70. {
  71. id: 8,
  72. label: '二级 3-2'
  73. }
  74. ]
  75. }
  76. ],
  77. defaultProps: {
  78. children: 'children',
  79. label: 'label'
  80. },
  81. openTree:[],//需要展开的id
  82. };
  83. }
  84. method:{
  85. openTreeList(list) {
  86. list.forEach((item) => {
  87. this.openTree.push(item.id);
  88. if (item.children && item.children.length) {
  89. this.openTreeList(item.children);
  90. }
  91. });
  92. },
  93. }
  94. mounted(){
  95. this.treeList.forEach((item) => {
  96. // 展开所有树
  97. this.openTree.push(item.id);
  98. if (item.children && item.children.length > 0) {
  99. this.openTreeList2(item.children); //循环
  100. }
  101. });
  102. console.log(this.treeList, 'treeList111111111111111');
  103. }
  104. };
  105. </script>

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

闽ICP备14008679号