el-tree 编辑后保持现有展开状态
- 搜索时,找到对应结果,全部展开找到搜索项
- 编辑时,保持原有样式
<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>
一个小需求让我写这么多代码,可恶!
data () {return {expandedKeys: []}}mounted () {this.findDepartmentTree()},async findDepartmentTree (expandedKeys = false) {this.laodingTree = trueconst currentExpandedKeys = [...this.expandedKeys]// checked 是根据input框查询时,是需要全部展开,找到搜索项,先清空expandedKeysif (expandedKeys === 'checked' && !this.deptName) {this.expandedKeys = []}// 调接口,树赋值this.data = res.datathis.$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) // 添加父节点 keythis.collectChildKeys(node, keysToRemove) // 递归收集所有子节点 keythis.expandedKeys = this.expandedKeys.filter(k => !keysToRemove.has(k))console.log('this.expandedKeys', this.expandedKeys)},// 递归收集所有子节点的 keycollectChildKeys (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)},