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

一开始想的是编辑某一行时, 保存当前行数据: 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)
    }
  }
}