前端问题集（1）：Ant Design Vue 中 switch 实现前端修改用户状态不需要重新请求后台数据

一、预期效果

用户点击状态开关，修改用户状态后，重新加载实时的用户状态，且不需要通过刷新页面重新请求后台的方式实现，提升用户体验。

二、实现代码

因为每个人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)