前言
在开发过程中,产品经理提出了一个需求,大概意思是 表单中的单选组组件的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监听属性监听表单中的单选组的值,存下旧值,然后再确认框选否的时候再把旧值赋回去。