最近遇到一个需要在切换选项框前校验是否可以切换的需求,el-select组件本身不支持拦截操作,所以只能用其它方法了,我使用的Proxy的拦截器,代码如下
<template>
<div>
<el-select v-model="form.value">
<el-option label="a" :value="1" />
<el-option label="b" :value="2" />
</el-select>
</div>
</template>
<script>
export default {
data () {
return {
form: {}
}
},
methods: {
// 模拟请求
getData() {
return new Promise((resolve) => {
let res = confirm("按下按钮")
resolve(res)
})
}
},
mounted() {
this.form = new Proxy({ value: 1 }, {
set: (obj, prop, value) => {
// 只拦截key为value
if (prop === 'value') {
this.getData()
.then(res => {
res && (obj[prop] = value)
})
} else {
obj[prop] = value
}
return true
}
})
}
}
</script>
逻辑很简单,通过proxy拦截属性值切换,上面的代码在切换选项会有弹窗,只有选择确认值才会切换,proxy的相关用法可以参考:MDN Proxy用法