Vue el-table (编辑,新增,删除)不刷新更新树形子节点数据

    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) // 重新打开节点
        })
      })
    },

你可能感兴趣的:(vue.js,javascript,前端)