前提:今天遇到的新需求,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)
}
}
完结。。。