el-select阻止change事件

585 阅读1分钟

先说需求,在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(() => {
            
          });
      }
    },

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