【问题标题】:bootstrap-vue select components with filter options?bootstrap-vue 选择带有过滤器选项的组件?
【发布时间】:2020-05-11 00:30:14
【问题描述】:

在带有 bootstrap-vue 的 vue 项目中,我搜索选择组件的工作原理 https://bootstrap-vue.js.org/docs/components/form-select/ 并且没有看到它有任何过滤选项吗? 如果没有,是否还有其他一些带有过滤器选项的 bootstrap-vue 选择组件/库?

"bootstrap-vue": "^2.1.0"
"vue": "^2.6.10"

谢谢!

【问题讨论】:

  • <b-form-select> 只是一个带有 Bootstrap v4.x 样式的原生浏览器 <select> 元素。所以它和<select> 元素有同样的限制。您将需要使用 <b-dropdown> 并创建自定义选择样式下拉菜单。
  • 我在这里查看bootstrap-vue.js.org/docs/components/dropdown 并没有看到任何过滤器选项。请指出是否有

标签: selection bootstrap-vue


【解决方案1】:

有可能。 使用 b-form-datalist。 请参阅手册中的示例https://bootstrap-vue.org/docs/components/form-input

<template>
    <b-form-input list="my-list-id"></b-form-input>

    <datalist id="my-list-id">
        <option>Manual Option</option>
        <option v-for="size in sizes">{{ size }}</option>
    </datalist>
</template>

<script>
    export default {
      data() {
        return {
          sizes: ['Small', 'Medium', 'Large', 'Extra Large']
        }
      }
    }
</script>

【讨论】:

  • 这很好用,除非你想把自定义样式放到下拉列表中
【解决方案2】:

我为自己建造了一些东西。这是代码 sn-ps 以防万一。我使用表格是因为我想显示其他列,但它可以换成其他东西,例如跨度或按钮列表。

<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>

【讨论】:

  • 我意识到当您在页面/组件上多次使用同一个项目时,我的代码中有一个小错误,因为折叠的 id 是硬编码的。您可能希望将此代码添加到mounted() 方法并为您的折叠命名/键mounted() { this.collapseKey = Math.floor(100000 + Math.random() * 900000) },
猜你喜欢
  • 2021-03-07
  • 1970-01-01
  • 2014-05-14
  • 1970-01-01
  • 2017-04-25
  • 2020-10-09
  • 1970-01-01
  • 2016-10-31
  • 2020-07-21
相关资源
最近更新 更多