一、预期效果
用户点击状态开关,修改用户状态后,重新加载实时的用户状态,且不需要通过刷新页面重新请求后台的方式实现,提升用户体验。
二、实现代码
因为每个人Table展示数据的方式不一样,我这里只说明实现过程中的重点代码。
2.1 switch开关代码
<span slot="status" slot-scope="status, record">
<a-switch
size="small"
:checked="Boolean(record.status)" //默认开关状态取决于用户状态 0,1,直接使用01会有告警,使用Boolean()转化一下
@change="onChange($event, record)" //传递开关状态和当前行数据
/>
</span>
2.2 switch 对应的方法
这里设计使用弹框提醒用户是否确认修改用户状态
//调整用户状态
onChange(e, record) {
//确认框中用到的当前作用域this需要提前替换为局部变量,否则浏览器会提示无法获取该属性。
let self = this
this.$confirm({
title: "确认修改此用户的状态信息?",
//自定义按钮内容
okText: "确认",
cancelText: "取消",
onOk() {
let values;
//根据开关状态初始化,传入后台的值
if(e){
values = {id:record.id,status:1}
record.status=1
}else{
values = {id:record.id,status:0}
record.status=0
}
//调用后台方法修改用户状态
axiosPostApi("/api/system/updateUserStatus", values).then((resp) => {
if (resp.code == 200) {
//重点内容:根据修改后的信息,调整前端数据集中的数据内容,这样就不用重新请求后台数据了。实现无刷新更新数据
self.$set(self.userData, self.userData.indexOf(record), record)
}
});
},
onCancel() {},
});
},
2.3 重点内容
问题的主要解决思路:修改现有前端数据集,避免重新请求后台。
1.为什么要定义个 self 对象
答:确认框中用到的当前作用域this,需要提前替换为局部变量,否则浏览器会提示无法获取该属性。换句话说,不这么做,确认框中将不能使用你页面中定义的数据和方法。
2.怎么修改指定的数据
答:主要流程如下:
一、传参数的时候,传入当前行数据
onChange($event, record)
二、根据行数据求出该数据在数据集中的排序
self.userData.indexOf(record)
三、修改当前行中的数据,这里是修改用户的状态数据
record.status=0
四、使用 $set 方法更新数据集
self.$set(self.userData, self.userData.indexOf(record), record)