Select本身已经很好了,然而实际需求总是这样的难以捉摸!我想在选中下拉框之时弹框让用户确认,如果用户确认了,才修改下拉框中的选中值,否则是保持原值。
翻遍了element-ui文档也没能找到符合的功能,老办法,看源码吧,当然了直接改源码会有风险的,大不了以后升级element-ui时小心点咯。
具体代码如下:
import { Select } from 'element-ui'
// 修改el-select,添加beforeOptionSelect回调
const handleOptionSelect = Select.methods.handleOptionSelect
// 给select添加beforeOptionSelect属性
Select.props.beforeOptionSelect = {
type: Function,
default: function () {
return function () {
}
}
}
// 修改select的handleOptionSelect方法,插入自己的逻辑
Select.methods.handleOptionSelect = function (...args) {
// 调用beforeOptionSelect回调,如果不返回false,则继续往下
// 这里处理了异步和非异步的情况,我用到的是异步的情况
if (this.beforeOptionSelect.length === 3) { // 第三个参数是一个回调,说明这是一个异步的操作,不能立马返回
const cb = (res) => {
if (res !== false) {
handleOptionSelect.apply(this, args)
} else {
this.visible = false
}
}
this.beforeOptionSelect(args[0].value, args[0].label, cb)
} else if (this.beforeOptionSelect(args[0].value, args[0].label) !== false) {
handleOptionSelect.apply(this, args)
} else {
this.visible = false
}
}
改造到此结束,那么怎么使用呢,还是看代码:
// 使用select的组件中添加对改写后组件的依赖
...
components: {
ElSelect: Select
}
...
// 在模板中给el-select添加beforeOptionSelect属性
...
<el-select :beforeOptionSelect="handleOptionSelect">...</el-select>
...
// 实现自己的beforeOptionSelect方法
...
// 最多接收三个参数,分别是当前选中的值,对应的文本,和配合异步使用的回调,如果不是异步的,不要声明第三个参数,声明了第三个参数,就一定要调用它
beforeOptionSelect (value, labe, done) {
this.$confirm('是否确认修改?', '确认框').then(() => {
done(true)
}).catch(() => {
done(false)
})
}
...
我觉得这个例子 页给出了一个从外部修改Element-UI的方法,以后如果需要我还会再修改别的,暂时还没遇到这种方法导致的问题,除了版本升级外。
如果帮助到你了,请帮忙点个赞:)