先说需求,在change发生前需要通过状态判断是否进行change事件。
由于select没有暴露类似beforeChange的方法查阅资料,很多大神用的Proxy,这里分享一种小白方法,将双向绑定的model改为单向的value,直接上代码:
<el-select :value="id" placeholder="请选择" @change="beforeChange">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
js示例
beforeChange(newValue) {
// canChanged可直接切换
if (this.canChanged) {
this.id = newValue; // 手动进行双向绑定
this.xxx();
} else {
this.$confirm(
'确认切换?',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
},
)
.then(() => {
this.id = newValue; // 手动双向绑定
this.xxxx();
.catch(() => {
});
}
},
目前是用这种方法解决了问题,应该还有很多其他写法,欢迎各位大佬们不吝赐教🎉