element el-tree树结构刷新后保留展开状态解决方法 发布时间:2023/10/11 layui element tree 树状结构 element el-tree树结构刷新后保留展开状态解决方法 我们在使用element的el-tree组件的时候,当我们给树结构重新赋值后,树节点就全部自动合上了。所以我们要记录展开状态,方法如下 html代码如下: <el-tree ref="tree" :data="treeList" :highlight-current="true" :default-expanded-keys="defaultExpandIds" //这个属性就是记录展开状态的 :filter-node-method="filterNode" node-key="id" //这个属性不能漏掉 :indent="30" :accordion="true" class="filter-tree" :props="defaultProps" @node-click="clickTreeItem" @node-expand="handleNodeExpand" // 展开节点时触发的函数 @node-collapse="handleNodeCollapse" // 关闭节点时触发的函数 > </el-tree> 复制代码 定义变量 data () { return { treeList: [], // 我的树结构数据 defaultExpandIds: [] // 这里存放要默认展开的节点 id } } 复制代码 method函数: // 树节点展开 handleNodeExpand(data) { // 保存当前展开的节点 let flag = false this.defaultExpandIds.some(item => { if (item === data.id) { // 判断当前节点是否存在, 存在不做处理 flag = true return true } }) if (!flag) { // 不存在则存到数组里 this.defaultExpandIds.push(data.id) } }, // 树节点关闭 handleNodeCollapse(data) { // 删除当前关闭的节点 this.defaultExpandIds.some((item, i) => { if (item === data.id) { this.defaultExpandIds.splice(i, 1) } }) this.removeChildrenIds(data) // 这里主要针对多级树状结构,当关闭父节点时,递归删除父节点下的所有子节点 }, // 删除树子节点 removeChildrenIds(data) { const ts = this if (data.children) { data.children.forEach(function(item) { const index = ts.defaultExpandIds.indexOf(item.id) if (index > 0) { ts.defaultExpandIds.splice(index, 1) } ts.removeChildrenIds(item) }) } }, 复制代码