在一个利用element的权限管理项目中,用到了下图的相关效果,这里的部门有层级,类似与树结构,这里我们用表树结构来形容这个表格,同时,数据是通过节点,按需加载resolve回数组的。
然而,当我需要对节点进行操作时,因element处理此数据是放入浏览器缓存中的,即使我重新请求数据,也无法更新表中的数据
在考虑用户体验的前提下我进行了相关的思考,数据在缓存中,那最简单的,我们把这个table销毁再创建,数据不就及时更新了,但是这样的用户体验教差。
data中定义相关的值
data() {
return {
tableShow:true
};
},
在增删改操作成功回调时,进行dom的销毁与创建
addActive({ ...this.form, parentId: id }).then((res) => {
res ? this.msgSuccess("新增成功") : null;
this.reset();
this.getList();
this.tableShow=false;
this.$nextTick(() => {
this.tableShow=true;
})
});
哪,有没有用户体验更好地方法呢?扒拉了不少资料,我们来看看优化版
data(){
return{
//节点数据是一个伪数组,我们用es6的Map来存储它
maps: new Map(),
tabRow:{},
parentId:0,
}
}
// 操作树结构表时实时更新表内数据
updataTable(row){
// 判断是否为顶层节点
if(row.parentId=='0'){
this.getList();
}
// 否则刷新该dom的父节点数据,以空数组替换
else{
//element的数据缓存是放这里的,因此我们可以在这里先用空数组替换它,清空缓存
this.$set(this.$refs.tableDom.store.states.lazyTreeNodeMap, row.parentId, []);
let treeObj=this.maps.get(this.parentId);
treeObj.hasChildren=true;
this.load(treeObj.tree,treeObj.treeNode,treeObj.resolve);
}
},
// 按需懒加载表格数据
load(tree, treeNode, resolve) {
this.parentId= tree.id;
this.maps.set(this.parentId,{tree,treeNode,resolve})
listConfig({
id: tree.id,
}).then((response) => {
response.data.forEach((item) => {
item.hasChildren = true;
});
resolve(response.data);
});
},
/** 新增按钮操作 */
handleAdd(row) {
this.tabRow=row;
if (row) {
this.form.parentName = row.name;
this.form.parentId = row.id;
}
this.open = true;
this.form.title = "添加系统";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.tabRow=row;
this.form = JSON.parse(JSON.stringify(row));
this.form.title = "修改系统";
this.open = true;
},
/** 删除按钮操作 */
handleDelete(row) {
this.tabRow=row;
this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return delModule({ id: row.id });
})
.then(() => {
this.updataTable(this.tabRow);
this.msgSuccess("删除成功");
});
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
// 编辑
if (this.form.id) {
editModule(this.form).then((res) => {
this.msgSuccess("修改成功");
this.reset();
this.updataTable(this.tabRow);
});
}
// 各级新增
else {
this.addModuleActive(this.form.parentId);
}
}
});
},
到这一步,我们已经实现了基于element表树结构增删改的操作了。完整代码暂放腾讯云