Vue+Element中Table懒加载删除后实现数据动态更新
1.在我做的项目中使用Table懒加载显示列表信息中出现了删除数据不能自动更新的bug,在一番查询后找到了解决办法。
data() {
return {
list: [],
maps:new Map()
};
},
methods中的具体实现方法
load(tree, treeNode, resolve) {
const pid = tree.id;
this.maps.set(pid,{tree,treeNode,resolve})
getGoodsTypeByPid(pid).then(res => {
const nodes = res.data.map(v => {
return { ...v, hasChildren: v.level <= 2 };
});
resolve(nodes);
});
},
handleDelete(index, row) {
console.log(row);
this.$confirm("是否要删除该品牌", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
console.log(row.id);
deleteProductCate(row.id).then(response => {
this.$message({
message: "删除成功",
type: "success",
duration: 1000
});
this.getList();
const {pid}=row
const {tree,treeNode,resolve} = this.maps.get(pid)
this.$set(this.$refs.table.store.states.lazyTreeNodeMap,pid,[])
this.load(tree,treeNode,resolve);
// this.reload()
});
});
},