Vue-multiselect

Example fiddle for issue reproduction usage

by ksey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-container>
    <b-row>
      <b-col>
        <multiselect
          v-model="filter.continent"
          :multiple="true"
          :options="continents"
        ></multiselect>
      </b-col>
      <b-col>
        <multiselect
          v-model="filter.population"
          :multiple="true"
          :options="populations"
          :custom-label="option => option.text"
        ></multiselect>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <b-table
          :items="countries"
          :fields="fields"
          :filter-function="filterFunction"
          :filter="filter"
        ></b-table>
      </b-col>
    </b-row>
  </b-container>
</div>

JavaScript

new Vue({
  el: '#app',
  components: {
    Multiselect: window.VueMultiselect.default,
  },
  data: () => ({
    fields: [
      { key: 'name', label: 'страна' },
      { key: 'continent', label: 'континент' },
      { key: 'population', label: 'население, млн. человек' },
    ],
    filter: {
      continent: [],
      population: [],
    },
    continents: [ 'Европа', 'Азия', 'Северная Америка' ],
    populations: [
      { text: '[ 0, 50 )', value: [ 0, 50 ] },
      { text: '[ 50, 100 )', value: [ 50, 100 ] },
      { text: '[ 100, +∞ )', value: [ 100, Infinity ] },
    ],
    countries: [
      { name: 'Япония', population: 126.2, continent: 'Азия' },
      { name: 'Франция', population: 67, continent: 'Европа' },
      { name: 'Италия', population: 60.8, continent: 'Европа' },
      { name: 'США', population: 327.6, continent: 'Северная Америка' },
      { name: 'Малайзия', population: 31, continent: 'Азия' },
      { name: 'Вьетнам', population: 92.5, continent: 'Азия' },
      { name: 'Канада', population: 37.3, continent: 'Северная Америка' },
      { name: 'Мексика', population: 133.1, continent: 'Северная Америка' },
      { name: 'Норвегия', population: 5.3, continent: 'Европа' },
      { name: 'Китай', population: 1395.4, continent: 'Азия' },
    ],
  }),
  methods: {
    filterFunction(row, val) {
      const { continent: c, population: p } = val;
      return [
        !c.length || c.includes(row.continent),
        !p.length || p.some(n => n.value[0] <= row.population && n.value[1] > row.population),
      ].every(Boolean);
    },
  },
});