element 树 搜索之后树全部展开,重置收起

html 复制代码
<el-tree
          style='height: 70vh'
          :data="data"
          :props="defaultProps"
          node-key="id"
          @node-click="handleNodeClick"
          :highlight-current="true"
          :filter-node-method="filterNode"
          ref="tree"
          :key="treeKey"
          :default-expanded-keys="expandedKeys"
        ></el-tree>

<el-button
          size="small"
          type="primary"
          style='margin-left: 5px'
          icon="el-icon-search"
          @click="query"
        >查询
        </el-button>
        <el-button
          size="small"
          @click="resetForm"
        >重置
        </el-button>
javascript 复制代码
定义data
expandedKeys:[],
treeKey: 0 // 用于触发组件重新渲染的 key

搜索之后树全部展开,重置收起

javascript 复制代码
query(){
      this.$refs.tree.filter('');
      this.handleExpandAll()
    },
resetForm(){
      this.queryForm={
        name:'',
        pbsPartName:'',
        sbsSysName:'',
        sbsCSysName:'',
        serialNumber:'',
        supplier:'',
        electricalCode:'',
        positionCode:'',
        batchNumber:''
      }
      this.$refs.tree.filter('');
      this.handleCollapseAll()
    },
// 一键展开
    handleExpandAll() {
      this.expandedKeys = this.collectAllNodeIds(this.data);
      console.log("this.expandedKeys",this.expandedKeys)
      // 可选:若展开不生效,添加 key 刷新(一般无需)
      // this.treeKey += 1;
    },
    // 一键收起(核心修复)
    handleCollapseAll() {
      this.expandedKeys = []; // 清空展开节点
      this.treeKey += 1; // 关键:修改 key 强制组件重新渲染,清除缓存状态
      // 双重保障:主动调用组件内部方法重置展开状态(2.15.0 兼容)
      this.$nextTick(() => {
        this.$refs.tree.$emit('update:default-expanded-keys', []);
      });
    },