Vue el-table （编辑，新增，删除）不刷新更新树形子节点数据

HolleBug

已于 2023-04-15 11:29:15 修改

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端

于 2023-04-15 11:27:47 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45364616/article/details/130167654

版权

该代码段展示了如何在Vue中异步刷新树形表格数据，通过获取子节点信息，更新数据结构并处理内部状态，包括清理懒加载缓存，以及控制节点的展开和关闭状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    async onRefresh(parentId) {
      let result = await getItemTreeList({ parentId }); // 首先请求获取子节点数据
      let updatedChild = this.setHasChildren(result.data)
      this.updateKeyChildren(parentId, updatedChild)
    },
    updateKeyChildren(parentId, updatedChild) {
      let states = this.$refs.treeTable.store.states // 获取el-table内部数据存储
      let parentData = states.treeData[parentId] 
      if (!parentData) {
        return this.getItemTreeList()
      }
      let deep = (list) => {
        for (let i = 0; i < list.length; i++) {
          let item = list[i]
          if (item.id === parentId) {
            this.$set(item, 'children', updatedChild)
            break;
          } else {
            item.children.length && deep(item.children)
          }
        }
      }

      deep(states.data) // 更新table内部data
      this.$delete(states.lazyTreeNodeMap, parentId) // 删除当前子节点懒加载缓存
      this.$nextTick(() => {
        this.$set(parentData, 'children', updatedChild.map(item => item.id)) 
        this.$set(parentData, 'expanded', false) // 关闭当前操作的父节点
        this.$nextTick(() => {
          this.$set(parentData, 'expanded', true) // 重新打开节点
        })
      })
    },