el-tree 编辑后保持现有展开状态

搜索时，找到对应结果，全部展开找到搜索项
编辑时，保持原有样式

html 复制代码

		<div class="search">
          <el-input size="small" placeholder="请输入部门名称" suffix-icon="el-icon-search" v-model="deptName" @keydown.enter.native="findDepartmentTree('checked')">
          </el-input>
          <i class="el-icon-plus" @click="addDept"></i>
        </div>
        <el-tree :loading="laodingTree" :data="data" node-key="id" :default-expanded-keys="expandedKeys" :props="defaultProps" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" @node-click="handleNodeClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-dropdown @command="handleCommand(data, $event)">
                <span class="el-dropdown-link">
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu class="treeDropdown" slot="dropdown">
                  <el-dropdown-item command="edit">编辑</el-dropdown-item>
                  <el-dropdown-item command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </el-tree>

一个小需求让我写这么多代码，可恶！

javascript 复制代码

	data () {
		return {
			expandedKeys: []
		}
	}

	  mounted () {
	    this.findDepartmentTree()
	  },

    async findDepartmentTree (expandedKeys = false) {
      this.laodingTree = true
      const currentExpandedKeys = [...this.expandedKeys]
      // checked 是根据input框查询时，是需要全部展开，找到搜索项，先清空expandedKeys
      if (expandedKeys === 'checked' && !this.deptName) {
        this.expandedKeys = []
      }
      // 调接口，树赋值
      this.data = res.data

      this.$nextTick(() => {
        if (expandedKeys === 'checked' && !this.deptName) {
          this.expandedKeys = [-1]
        } else if (expandedKeys === 'checked') {
          // 根据input框查询,全部展开
          this.expandedKeys = this.getAllNodeKeys(this.data)
        } else {
          this.expandedKeys = currentExpandedKeys.length ? currentExpandedKeys : [-1]
        }
      })
    },
    // 全部展开
    getAllNodeKeys (nodes) {
      let keys = []
      nodes.forEach(node => {
        keys.push(node.id)
        if (node.children && node.children.length > 0) {
          keys = keys.concat(this.getAllNodeKeys(node.children))
        }
      })
      return keys
    },
    // 处理节点收起
    handleNodeCollapse (data, node) {
      const keysToRemove = new Set()
      keysToRemove.add(node.key) // 添加父节点 key
      this.collectChildKeys(node, keysToRemove) // 递归收集所有子节点 key
      this.expandedKeys = this.expandedKeys.filter(k => !keysToRemove.has(k))
      console.log('this.expandedKeys', this.expandedKeys)
    },
    // 递归收集所有子节点的 key
    collectChildKeys (node, keysSet) {
      if (node.childNodes) {
        node.childNodes.forEach(child => {
          keysSet.add(child.key) // 无论子节点是否展开，都强制移除
          if (child.expanded) { // 若子节点自身已展开，则递归处理其子节点
            this.collectChildKeys(child, keysSet)
          }
        })
      }
    },
    // 节点展开时，将key加入数组
    handleNodeExpand (data, node) {
      if (!this.expandedKeys.includes(node.key)) {
        this.expandedKeys = [...this.expandedKeys, node.key]
      }
      console.log('this.expandedKeys', this.expandedKeys)
    },