【ElemetUI 单选组件】切换单选值 需弹框选择“是”之后再赋值 选“否”则不赋值

---

前言

在开发过程中，产品经理提出了一个需求，大概意思是 表单中的单选组组件的v-model的值改变时，清除一个列表的的所有值，但在清除之前需要一个弹出框 用户点击“确认”则清除列表，用户点击“取消” 则不清除列表的值 且不改变单选组的v-model绑定值

如图：

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.监听表单中的单选组的v-model，若值被改变则存在data中

//监听对象中的某一属性
 'Form.radio': { 
      deep:true,
      handler(val, old) {
        console.log(val,old,'-拿到值');
        if(old!==''){
           this.oldWord = old;
        }
      },
    },

2.在表单控件上添加@change事件

先在控件上加change事件

<el-form-item label="标签叫啥好呢" prop="radio">
    <el-radio-group v-model="Form.radio"  @change="tabChangeClear()">
        <el-radio-button label="你好！"></el-radio-button>
        <el-radio-button label="不好？"></el-radio-button>
        <el-radio-button label="不好！"></el-radio-button>
        <el-radio-button label="拉倒！"></el-radio-button>
    </el-radio-group>
 </el-form-item>

在change事件里面写弹框以及后续操作

//---清空
    tabChangeClear(){
      if(this.oldWord!==''){
        this.$confirm('将会清空已输入的商品列表？，是否切换', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
        //点击确认后的操作 在这里我是清空列表啦
          this.List = [];
        })
        .catch((err) => {
          if(err){
           //然后把刚刚在watch里存的旧值 赋给表单中的单选组
           this.Form.radio = this.oldWord;
          }
        });
      }
    },

总结

这里对文章进行总结：主要就是利用watch监听属性监听表单中的单选组的值，存下旧值，然后再确认框选否的时候再把旧值赋回去。