如何在 Bootstrap Vue 中制作组合框？

Question

我正在尝试在 Bootstrap Vue v2.21.2 中制作一个 ComboBox，而不使用 Vuetify 的 v-combobox。

我试过使用 https://github.com/danielfarrell/bootstrap-combobox，但似乎效果不佳，我宁愿使用现有的 Bootstrap 组件，也不愿应用外部 CSS 插件。

有没有办法在 Bootstrap Vue 中创建组合框？或者我必须为此切换到 Vuetify 吗？

Answer 1

使用 vue-multiselect 会有所帮助，因为此软件包提供 searching in dropdowns。

我查找了一些组合框标题并找到了这个 vue-bootstrap-ajax-combobox。

我推荐 vue-multiselect 因为我一直在 bootstrap-vue 使用它。

我准备了一个片段来展示 vue-multiselect 如何完美地在下拉列表中进行搜索。

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    value: {
      name: 'John',
      email: 'john@domain.com'
    },
    options: [{
        name: 'John',
        email: 'john@domain.com'
      },
      {
        name: 'Ada',
        email: 'ada@domain.com'
      },
      {
        name: 'Nick',
        email: 'nick@domain.com'
      }
    ]
  },
  methods: {
    custom_label(option) {
      return `${option.name} - ${option.email}`
    }
  }
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://unpkg.com/vue-multiselect@2.0.2/dist/vue-multiselect.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue-multiselect@2.0.3/dist/vue-multiselect.min.js"></script>
<div id="app">
  <multiselect v-model="value" :options="options" :multiple="true" track-by="email" :custom-label="custom_label">
  </multiselect>
  <pre>{{ value }}</pre>
</div>

如何在 Bootstrap Vue 中制作组合框？

How do I make a ComboBox in Bootstrap Vue?

combobox

vue.js

bootstrap-4

vuejs2

bootstrap-vue