vue 基于iview select的下拉时时搜索

最近做一个功能，一个select下拉框支持多选，然后下拉框支持搜索，搜索的功能前端实现。虽然iview的select具有该功能，iview的搜索根据对应id搜索后，多选框需要显示红包的name值，而iview自带的搜索，虽然filter-by-label属性在搜索时，是否只按照 label 进行搜索，但是还有问题。

下面是我改进后的，支持id搜索，支持最多选的数量

项目演示地址   https://run.iviewui.com/kq95dMz7

------------------------------------------

<template>
<div>
<Select v-model="couponData" filterable multiple @input="limitcount" style="width:400px" @on-query-change="searchInner">
<Option v-for="item in checkBoxCount" :value="item.id" :key="item.id" :disabled="disabledMax15">
<span>{{item.name}}</span>
</Option>
</Select>
</div>
</template>
<script>
export default {
data () {
return {
disabledMax15: false,
couponData: ‘‘,
checkBoxCount: [
{id: 1, name: ‘红包1‘},
{id: 2, name: ‘红包2‘},
{id: 3, name: ‘红包3‘},
{id: 4, name: ‘红包4‘},
{id: 5, name: ‘红包5‘},
],
checkBoxCount2: []
}
},
methods: {
// 根据输入的数字过滤搜索对应的红包id
searchInner (query) {
let fCheckBoxCount = this.checkBoxCount2.filter((item) => {
return `${item.id}`.indexOf(query) !== -1
})
this.checkBoxCount = fCheckBoxCount
},
limitcount (e) {
// 最多选择4个
if (e.length > 3 && e instanceof Array) {
this.disabledMax15 = true
this.$Message.error(‘最多选4个‘)
} else {
this.disabledMax15 = false
}
},
},
mounted () {
this.checkBoxCount2 = [
{id: 1, name: ‘红包1‘},
{id: 2, name: ‘红包2‘},
{id: 3, name: ‘红包3‘},
{id: 4, name: ‘红包4‘},
{id: 5, name: ‘红包5‘},
]
}
}
</script>
<style>

</style>

vue 基于iview select的下拉时时搜索

原文：https://www.cnblogs.com/web-tian/p/14700668.html