elementPlus select既能输入又能选择

前提：今天遇到的新需求，select下拉框能够过滤，如果过滤不到就把当前输入的值去作为新的option选项

当前输入值通过v-model是拿不到的，v-model绑定是选项的value值，select本身也有一个@input事件，但是获取到的是当前键入的值，而不是已经输入的值，输入1的时候会返回1，再输入2会返回2，但是不会返回之前的1，所以关键点在于怎么获取这个输入框中的值。

通过查阅，select的filter-method是可以获取到的，但是这样就会影响原本的过滤效果，所以需要自定义select过滤器。

首先el-select绑定自定义过滤方法

:filterable="true" :filter-method="filterMethod"

let options = ref([])
let optionsClone = ref([])
const filterMethod = (query) => {
    let arr = []
    if (query !== '') {
        let regex = new RegExp(query);
        arr = optionsClone.filter(x => regex.test(x.label))
        if (arr.every(x => x.label !== query)) {
            arr.unshift(
                {
                    label: query,
                    value: query
                }
            )
        }
    } else {
        arr = options
    }
    options.value = structuredClone(arr)
}

其中options是select绑定的选项列表，optionsClone是原本的options列表数据，不可改变，当输入数据为空时候，还需要重新赋值回去。

想要知道当前选择数据是新建的还是原本就存在的，只需要使用optionsClone的数据去和select的v-model绑定的值比较即可

const handleChange = (val) => {
    let isExisted = optionsClone.every(x => x.value !== val)
    if (isExisted) {
        console.log('新建')
    } else {
        console.log(val)
    }
}

完结。。。