Henry Henry
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)

Henry

小学生中的前端大佬
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)
  • JavaScript

  • TypeScript

  • Vue

  • ElementUI

    • 基于 ElementUI 封装的 TextEllipsis
    • 基于 ElementUI 封装的 Tree
    • 基于 ElementUI 封装的 Tree2
    • 基于 ElementUI 封装的 SelectTree
    • 基于 ElementUI 封装的 NumberInput
    • 基于 ElementUI 封装的基础 table 和 form
    • 基于 ElementUI 封装的 TreeTable
    • 基于 VuePress 搭建一个类似 ElementUI 的说明文档
    • el-tree 节点过滤加载对应子节点
    • 简单调试 node_modules 源码
    • ElementUI 问题集合
    • 树形表格更新后保持折叠状态
      • 思路一
      • 思路二
    • 开始和完成时间互相限制
  • React

  • AntD

  • 前端
  • ElementUI
Henry
2021-05-30
目录

树形表格更新后保持折叠状态

最近在做树形表格时, 遇到一个需求: 表格默认全部展开, 用户可以手动折叠展开, 当增删改更新数据后要保持折叠状态

一开始想的是编辑某一行时, 保存当前行数据: this.row, 更新后, 重新获取全部数据, 根据 id 从全部数据中找到更新后的当前行数据, 使用 $set(this.row, 'key', 'value') 更新当前行, 由于不是更新全部数据, 所以表格会保持折叠状态; 但这种方式无法处理新增和删除(或者处理起来太麻烦)

故只能通过 expand-row-keys 和 expand-change 来解决了

# 思路一

获取全部数据后, 将所有父级 id 存放到 expand-row-keys 中, 这样默认全部展开就可以了; 在 expand-change 中根据展开还是折叠来添加或删除 id

想法是美好的, 现实是残酷的. 这种方法处理起来新增和删除也很麻烦

首次加载是没有问题的, 但当用户折叠几行后, 新增一行更新获取全部数据后, 这里 expand-row-keys 比所有父级 id 少了几个 id: 一个是折叠行的 id, 一个是新增行的 id, 由于我们没有保存折叠行的 id, 所以这条路行不通了

# 思路二

思路一由于未保存折叠行的 id 而行不通, 那咱们就保存一下

我们需要保存两个变量: 所有父级 id: allParentRowKeys 和折叠 id: foldRowKeys, 差集就是所有展开 id

获取全部数据后, 将所有父级 id 存放到 allParentRowKeys 中, 此时折叠 id 为空, 这样默认全部展开就可以了; 在 expand-change 中根据展开还是折叠在 foldRowKeys 添加或删除 id

当更新后, 获取全部数据后, allParentRowKeys 仍是所有父级 id(可能较上次多了: 新增操作, 少了: 删除操作), 而 foldRowKeys 不变, 还是保存的折叠 id(可能有垃圾数据: 被删除了, 不过影响不大; 可以在删除时处理一下), 这样差集还是所有展开 id, 完美!

具体代码:

export default {
  data() {
    return {
      rowKey: 'id',
      allParentRowKeys: [], // 所有父级 id
      foldRowKeys: [] // 折叠 id
    }
  },
  computed: {
    // 展开 id: 所有父级 id 与折叠 id 差集
    expandRowKeys() {
      return this.allParentRowKeys.filter(key => !this.foldRowKeys.includes(key))
    }
  },
  methods: {
    // 获取数据
    fetchData() {
      return this.$get(url).then(res => {
        this.data = list2Tree(data)
        this.allParentRowKeys = this.getAllParentRowKeys()
      })
    },
    getAllParentRowKeys(data = this.data) {
      return data.reduce(
        (acc, { [this.rowKey]: id, children }) =>
          children.length ? acc.concat([id, ...this.getAllParentRowKeys(children)]) : acc,
        []
      )
    },
    // 展开折叠行
    expandChange({ [this.rowKey]: id }, expanded) {
      expanded
        ? (this.foldRowKeys = this.foldRowKeys.filter(key => key !== id))
        : this.foldRowKeys.push(id)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
编辑 (opens new window)
#ElementUI
上次更新: 5/27/2023, 1:02:05 PM
ElementUI 问题集合
开始和完成时间互相限制

← ElementUI 问题集合 开始和完成时间互相限制→

最近更新
01
version 1.15
07-01
02
version 1.14
06-27
03
version 1.13
06-27
更多文章>
Theme by Vdoing | Copyright © 2017-2023 HenryTSZ | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式