elementui中表格树形结构子节点数据重新加载问题
element-ui中表格树形数据结构,使用了懒加载模式时,在对数据进行增删改查时视图并不能实时更新,需要刷新浏览器进行强制刷新数据才会显示。子节点更新要始视图更新,由于是懒加载 要使子节点数据重新加载 则要找到对应的父节点 通过load函数去再次加载。
·
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 || '请求失败')
})
},
更多推荐
已为社区贡献4条内容
所有评论(0)