element-ui中el-tree組件節點全展開與全收縮功能實現

目錄

1. 功能描述
2. 代碼實現
3. 最終效果

一、功能描述

• 實現： element-ui中el-tree組件全部節點的展開與收縮功能。
• 版本： "element-ui": "^2.3.7"。

二、代碼實現

<template>
  <div class="tree-container">
    <el-button type="primary" @click="onExpand">{{this.expandAll?'收縮':'展開'}}所有節點</el-button>
    <el-tree :data="data" ref="tree"></el-tree>
  </div>
</template>

<script>
  export default {
    data() {
      return {  
        expandAll: false,
        data: [{
          label: '一級 1',
          children: [{
            label: '二級 1-1',
            children: [{
              label: '三級 1-1-1'
            }]
          }]
        }, {
          label: '一級 2',
          children: [{
            label: '二級 2-1',
            children: [{
              label: '三級 2-1-1'
            }]
          }, {
            label: '二級 2-2',
            children: [{
              label: '三級 2-2-1'
            }]
          }]
        }]
      };
    },
    methods: {
      // 節點展開
      async onExpand () {
        try {
          await this.$confirm('確認要展開所有節點?', '提示', {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          this.expandAll = !this.expandAll
          // 改變每個節點的狀態
          this.changeTreeNodeStatus(this.$refs.tree.store.root)
        } catch (e) {
          this.$message({
            type: 'info',
            message: e === 'cancel' ? '取消操作' : '操作失敗'
          })
        }
      },
      // 改變節點的狀態
      changeTreeNodeStatus (node) {
        node.expanded = this.expandAll
        for (let i = 0; i < node.childNodes.length; i++) {
          // 改變節點的自身expanded狀態
          node.childNodes[i].expanded = this.expandAll
          // 遍歷子節點
          if (node.childNodes[i].childNodes.length > 0) {
            this.changeTreeNodeStatus(node.childNodes[i])
          }
        }
      }
    }
  };
</script>

三、最終效果

demo地址