点击按钮实现 el-tree 全部收起/展开

Vue3 + TS + ElementPlus

业务需求要求实现点击 icon 展开/折叠树形结构，ElementPlus 官方并没有提供相关功能，以防忘记记录一下

function collapseOrExpandTree(option: string) {
  // 这种写法只会收起一级和二级维度，当树层级超过两层时无法全部收起
  // 除非用 reduce() 之类的方法重写
  // dimensionTree.value.forEach((item) => {
  //    treeRef.value.store.nodesMap[item.$treeNodeId].expanded = false
  // })

  const isExpand = option === 'expand'
  const nodes = treeRef.value.store.nodesMap
  for (const node in nodes)
    nodes[node].expanded = isExpand
}

<iconpark-icon
  name="collapse"
  size="16"
  class="ml-[8px]"
  @click="collapseOrExpandTree('collapse')"
/>
<iconpark-icon
  name="expand"
  size="16"
  class="ml-[8px]"
  @click="collapseOrExpandTree('expand')"
/>
 <el-tree
  ref="treeRef"
  :data="dimensionTree"
/>