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>