el-table 懒加载自动展开节点

需求:el-table 懒加载模式下,刷新树数据,自动展开上次展开的节点。
说明:我这个案例是,先勾选记录,然后有个批量删除的按钮,点击一下,删除勾选的记录,然后刷新整个列表,此时列表会回到初始未展开状态,要实现的是自动展开刷新前展开的节点。
代码:

export default {
  data() {
    return {
      // 树结构数据(懒加载的数据同步到 treeData 中的逻辑需要自己实现)
      treeData: [],
      cacheExpandedKeys: new Set()
    }
  },
  methods: {
    // 当 flag 为 true 恢复上次展开的节点,当为 false 时保存上次展开过的节点
    handleExpandedRows(flag) {
      if (flag) {
        const fn = () => {
          // 只要还有 key 一直执行下去
          if (this.cacheExpandedKeys.size) {
            for (const key of this.cacheExpandedKeys.keys()) {
              const item = this.getItemByVal(key)
              if (item) {
                this.cacheExpandedKeys.delete(key) // 展开一个节点去除一个节点 key
                this.$refs.tableData.$refs.table.toggleRowExpansion(item, true)
                this.$refs.tableData.$refs.table.store.loadOrToggle(item)
              }
            }

            setTimeout(fn, 500)
          } else {
            // 等全部展开完后,重置展开节点的 loading = false 因为自动展开后有的节点下拉图标一直处于 loading 状态(bug)
            const treeData = this.$refs.tableData.$refs.table.store.states.treeData
            for (const key in treeData) {
              if (treeData[key].expanded) {
                treeData[key].loading = false
              }
            }
          }
        }
        fn()
      } else {
        this.cacheExpandedKeys.clear()
        const treeData = this.$refs.tableData.$refs.table.store.states.treeData
        for (const key in treeData) {
          // selectionRows 是选中的节点,如果上次展开的节点包含在被选中的节点中,则不保存
          const isDelete = this.selectionRows.findIndex(item => item.id === key) === -1
          if (isDelete && treeData[key].expanded) {
            // 保存展开过的节点 key
            this.cacheExpandedKeys.add(key)
          }
        }
      }
    },


    getItemByVal(val) {
      const key = 'id'
      const children = 'children'

      const fn = (nodes, val) => {
        for (const node of nodes) {
          if (node[key] === val) return node
          if (node[children] && node[children].length > 0) {
            const obj = fn(node[children], val)
            if (obj) return obj
          }
        }
      }
      return fn(this.treeData, val)
    }
    
  }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 `expand-row` 事件来实现 el-table懒加载,具体步骤如下: 1. 在 el-table 中设置 `:tree-props="{lazy:true, load:loadChildren}"`,其中 `lazy:true` 表示启用懒加载,`load:loadChildren` 表示加载远程子节点数据的方法为 `loadChildren`。 2. 在 `methods` 中定义 `loadChildren` 方法,该方法接收三个参数:`node` 表示当前节点,`resolve` 表示加载完成后的回调函数,`reject` 表示加载失败后的回调函数。 3. 在 `loadChildren` 方法中通过远程请求获取当前节点的子节点数据,然后将数据传给 `resolve` 函数。 4. 在 `expand-row` 事件中调用 `loadChildren` 方法,将当前节点和回调函数作为参数传递进去。 下面是一个示例代码: ```html <template> <el-table :data="tableData" :tree-props="{lazy:true, load:loadChildren}" @expand-row="expandRow" > <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [] } }, methods: { loadChildren(node, resolve, reject) { // 发送远程请求获取当前节点的子节点数据 axios.get(`/api/children?id=${node.id}`).then(response => { resolve(response.data) }).catch(error => { reject(error) }) }, expandRow(row, expandedRows) { // 调用 loadChildren 方法加载子节点数据 this.loadChildren(row, children => { row.children = children expandedRows.push(row) }) } } } </script> ``` 在上面的示例中,我们通过 `axios` 发送了一个远程请求来获取子节点数据,并通过 `resolve` 函数将数据传递给 el-table 组件。在 `expand-row` 事件中,我们调用了 `loadChildren` 方法来加载子节点数据,并将回调函数 `children => {row.children = children; expandedRows.push(row)}` 作为参数传递进去。在回调函数中,我们将子节点数据赋值给当前节点的 `children` 属性,并将当前节点加入到 `expandedRows` 数组中,以便展开当前节点时可以正常显示子节点

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值