https://blog.csdn.net/Unrequited66/article/details/106757052/

问题描述
element-ui中表格树形数据结构,使用了懒加载模式时,在对数据进行增删改查时视图并不能实时更新,需要刷新浏览器进行强制刷新数据才会显示。
解决方案
https://blog.csdn.net/Unrequited66/article/details/106757052/
核心思想

子节点更新要始视图更新,由于是懒加载 要使子节点数据重新加载 则要找到对应的父节点 通过load函数去再次加载

找父节点的方法:

案列:
更新表格树形结构子节点(入移动/删除等操作)刷新页面
move(type, item, val) {
        console.log(type, item)
        let preItem = {}
        let curItem = {}
        if (item.grade == 1) {
          let first = this.newTreeDictionaryListData.findIndex((ele) => {
            return ele.id == item.id
          })
          console.log(first, 'first')
          if (type == 'up') {
            if (first == 0) {
              return
            }
            //lastSeq 当前移动的项
            let lastSeq = item.seq
            curItem = item
            curItem.seq = this.newTreeDictionaryListData[first - 1].seq
            preItem = this.newTreeDictionaryListData[first - 1]
            preItem.seq = lastSeq
          } else {
            if (first == this.newTreeDictionaryListData.length - 1) {
              return
            }
            //initSeq 当前移动的项  lastSeq当前项后第一项
            let initSeq = item.seq
            let lastSeq = this.newTreeDictionaryListData[first + 1].seq
            curItem = item
            curItem.seq = lastSeq
            preItem = this.newTreeDictionaryListData[first + 1]
            preItem.seq = initSeq
          }
        }
        if (item.grade != 1) {
          let secondList = []

          let node = this.$refs.treeDictionaryList2.store.states.lazyTreeNodeMap

          secondList = node[item.parentId]

          let index = secondList.findIndex(nodeItem => nodeItem.id == item.id)

          console.log(secondList, 'secondList')

          if (type == 'down') { //下移

            if (index + 1 == secondList.length) {
              this.$message.error('目前处于最后位,不需要下移')
              return
            }

            let nextItem = {}
            if (secondList.length > index + 1) {
              nextItem = secondList[index + 1]
            }

            let firstSeq = item.seq
            curItem = item
            curItem.seq = nextItem.seq
            nextItem.seq = firstSeq

            preItem = nextItem

            secondList[index] = nextItem
            secondList[index + 1] = curItem
          } else { //上移

            if (index == 0) {
              this.$message.error('目前处于第一位,不需要上移')
              return
            }

            if (index > 0) {
              preItem = secondList[index - 1]
            }

            let firstSeq = item.seq
            curItem = item
            curItem.seq = preItem.seq
            preItem.seq = firstSeq

          }

          for (var key of this.maps) {
            console.log('key', key)
            if (key[0] == item.parentId) {
              let {
                tree,
                treeNode,
                resolve
              } = key[1]
              this.loading = true
              this.$set(
                this.$refs.treeDictionaryList2.store.states.lazyTreeNodeMap,
                item.parentId,
                []
              )

              this.load(tree, treeNode, resolve)
            }

          }

      
        console.log('为啥调两次的', type)
        console.log('curItem', curItem)

        treeDictionaryUpdate(curItem)
          .then((res) => {
            console.log(res, 'zzzadd')
            if (res.code === '000000') {
              treeDictionaryUpdate(preItem)
                .then((res) => {
                  console.log(res, 'zzzadd')
                  if (res.code === '000000') {
                    //这里之所以在grade=1的时候才请求接口  是因为当二三级树展开的时候请求接口页面数据之前已经展开过  再请求页面不会有变化
                    //要使用、得页面变化  move移动的时候已经模拟界面数据变化   用户刷新的时候真正的接口数据会更新
                    if (item.grade == 1) {
                      this.getTreeDictionaryList(this.formValue)
                    }
                    //
                  } else {}
                })
            } else {}
          })
          .catch((error) => {
            // this.$message.error(error.message || '请求失败')
          })
      },

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐