The expansion element-ui select function, support function beforeOptionSelect

Select is already very good, but the actual demand is always so elusive! I think when you select the drop-down box of shells box lets the user to confirm, if the user confirms, and only modify the selected value drop-down box, otherwise it is retained.

Be careful when slightly rummaged element-ui document could not find function in line with the old way, look at the source code, of course there is the risk of a direct source of change, big deal after the upgrade element-ui.

Specific code as follows:

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
  }
}

The transformation is over, then how to use it, or look at the code:

// 使用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)
	})
}
...

I think this example shows a page Element-UI modification method from outside, if needed later I will modify else, temporarily not encountered problems with this approach caused, in addition to the upgrade.

If help to you, please help point a praise :)