时间戳

首页 > 解决方案 > 如何在 Bootstrap Vue 中制作 ComboBox？

vue.js - 如何在 Bootstrap Vue 中制作 ComboBox？

问题描述

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

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

有没有办法在 Bootstrap Vue 中创建一个组合框？还是我必须为此切换到 Vuetify？

标签： vue.jsbootstrap-4vuejs2comboboxbootstrap-vue

解决方案

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

推荐阅读