扩展element-ui的select功能，支持beforeOptionSelect功能

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的方法，以后如果需要我还会再修改别的，暂时还没遇到这种方法导致的问题，除了版本升级外。

如果帮助到你了，请帮忙点个赞:)