在带有bootstrap-vue的vue项目中,我搜索选择组件的工作方式https://bootstrap-vue.js.org/docs/components/form-select/看不到有任何过滤器选项吗?如果没有,还有其他带有筛选器选项的bootstrap-vue select组件/库吗?
"bootstrap-vue": "^2.1.0"
"vue": "^2.6.10"
谢谢!
我为自己打造了一些东西。如果有帮助,以下是代码片段。我使用了一个表,因为我想显示其他列,但可以将其交换为其他值,例如跨度或按钮列表。
<template>
<div>
<div>
<b-form-input
class='search-input'
type='search'
v-model='filterCriteria'
v-on:click='toggleDropDown()'
v-on:keyup.enter='selectItem()'
:placeholder='placeholder'>
</b-form-input>
</div>
<div>
<b-collapse id='drop-down'>
<b-table
no-border-collapse
ref='collapsibleTable'
responsive='sm'
selectable
select-mode='single'
sticky-header='200px'
thead-class='d-none'
v-model='filteredRows'
:fields='fields'
:filter='filterCriteria'
:items='items'
:sort-by.sync='sortBy'
:sort-desc.sync='sortDesc'
@row-selected='rowSelected'>
</b-table>
</b-collapse>
</div>
</div>
</template>
<script>
export default {
data() {
return {
filterCriteria: '',
filteredRows: []
}
},
methods: {
toggleDropDown() {
this.$root.$emit('bv::toggle::collapse', 'drop-down')
},
selectItem() {
if (this.filteredRows.length === 1) {
this.$refs.collapsibleTable.selectRow(0)
}
},
rowSelected(rowArray) {
// No rows or 1 row can be selected
if (rowArray.length === 1) {
this.$emit('item-selected', rowArray[0])
this.filterCriteria = rowArray[0][this.display]
this.toggleDropDown()
}
}
},
props: {
display: {
required: true,
type: String
},
fields: {
required: true,
type: Array
},
items: {
required: true,
type: Array
},
placeholder: {
required: false,
default: 'Select'
},
sortBy: {
required: true,
type: String
},
sortDec: {
default: false,
required: false
}
}
}
</script>