一、问题说明

Ant Design Vue 中使用 this.$confirm 时,this调用其他方法失败,提示是该方法未定义。

二、解决方法

在确认框中用到的当前作用域时,this需要提前替换为局部变量,否则浏览器会提示无法获取该属性。

 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() {},
      });
    },

Logo

前往低代码交流专区

更多推荐