el-select阻止change事件

先说需求,在change发生前需要通过状态判断是否进行change事件。

由于select没有暴露类似beforeChange的方法。查阅资料,好多大佬用的Proxy,这里分享一种小白方法,可以不用原生拦截,转而将双向绑定的v-model改为单向的value,下面上代码会很清晰。


    
     

js事例:

 beforeChange(newValue) {
      // canChanged可直接切换
      if (this.canChanged) {
        this.id = newValue; // 手动进行双向绑定
        this.xxx();
      } else {
        this.$confirm(
          '确认切换?',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
          },
        )
          .then(() => {
            this.id = newValue; // 手动双向绑定
            this.xxxx();
          .catch(() => {
            
          });
      }
    },

目前我用这种方法解决了问题,应该还有很多其他写法,欢迎各位大佬们不吝赐教
 

你可能感兴趣的:(javascript,前端,vue.js)