vue-multiselect 客户端搜索筛选

vue-multiselect默认情况下searchable属性设置为true，所以默认情况就是支持客户端搜索筛选的，筛选条件基于label属性进行比对，当然你也可以自定义比对的属性字段,比如对title字段进行筛选设置label="title"即可。

通过title属性字段筛选

<template>
 <div style="margin-left:10px;width:50%">
  <multiselect v-model="value" deselect-label="Can't remove this value" 
   track-by="title"
   label="title" 
   placeholder="请选择" 
   :options="options"
   :searchable="true"
   :allow-empty="false"
   selectLabel="回车选择"
   selectGroupLabel="回车选择整个分组"
   selectedLabel="已选择"
   deselectLabel="回车取消选择"
   deselectGroupLabel="回车取消选择"
   >
   <div slot="noResult">未搜索到结果</div>
    <template slot="singleLabel" slot-scope="{ option }">
    <strong>{{ option.title }}</strong> 由<strong>  {{ option.val }}开发的</strong>
    </template>
  </multiselect>
  <pre ><code>{{ value  }}</code></pre>
</div>
</template>
 <script> 
import Vue from 'vue'
//导入Multiselect
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';
//注册multiselect组件
Vue.component('multiselect', Multiselect)
 export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: null,
      options: [
        { title: 'Vue.js', val: 'JavaScript' },
        { title: 'Rails', val: 'Ruby' },
        { title: 'www.jd.com', val: 'C#' },
        { title: 'www.taobao.com', val: 'java', $isDisabled: true },
        { title: 'www.itxst.com', val: 'C#' }
      ]
    }
  }
}
</script>

通过val属性字段筛选

<template>
 <div style="margin: auto;width:50%">
  <multiselect v-model="value" deselect-label="Can't remove this value" 
   track-by="title"
   label="val" 
   placeholder="请选择" 
   :options="options"
   :searchable="true"
   :allow-empty="false"
    selectLabel="回车选择"
    selectGroupLabel="回车选择整个分组"
    selectedLabel="已选择"
    deselectLabel="回车取消选择"
    deselectGroupLabel="回车取消选择"
   >
   <div slot="noResult">未搜索到结果</div>
    <template slot="singleLabel" slot-scope="{ option }">
     <strong>{{ option.title }}</strong> 由<strong>  {{ option.val }}开发的</strong>
    </template>
  </multiselect>
  <pre ><code>{{ value  }}</code></pre>
</div>
</template>
 <script> 
import Vue from 'vue'
//导入Multiselect
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';
//注册multiselect组件
Vue.component('multiselect', Multiselect)
 export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: null,
      options: [
        { title: 'Vue.js', val: 'JavaScript' },
        { title: 'Rails', val: 'Ruby' },
        { title: 'www.jd.com', val: 'C#' },
        { title: 'www.taobao.com', val: 'java', $isDisabled: true },
        { title: 'www.itxst.com', val: 'C#' }
      ]
    }
  }
}
</script>

在线试一试