vue-multiselect插槽列表

vue-multiselect提供了多达11个插槽可以对各个功能进行自定义。

插槽列表

插槽名称描述
option*下拉选项插槽
slot-scope:
option  下拉选项对象
search    搜索关键词
maxElements最多选中N个选项插槽
noResult*未找到相关数据插槽
noOptions没有下拉选项时的插槽
beforeList下拉项目顶部插槽
afterList下拉项目底部插槽
caret打开和关闭下拉选项插槽
singleLabel*下拉选项显示给用户看的内容插槽
placeholder提示内容插槽
limit选择时超过设定的数量时显示的插槽,默认为more,
前提条件是多选和设置了limit属性的数据量,下面的在线例子请选中3个选项看效果
clear清除选中项插槽
tagSlot-scope(标签插槽)
option – selected option
search – the search value
remove – method to remove the slot (pass the option)

代码例子

<template>
 <div style="width:50%;padding:10px">
  <multiselect
   v-model="value"
   deselect-label="已选中" 
   track-by="name"
   label="name" 
   placeholder="请选择" 
   :options="options"
   :searchable="true"
   :close-on-select="false"
   :multiple="true"
    selectLabel="回车选择"
    selectGroupLabel="回车选择整个分组"
    selectedLabel="已选择"
    deselectLabel="回车取消选择"
    deselectGroupLabel="回车取消选择"  
    tag-placeholder="添加标签到下拉项"
    :taggable="false"
    :max="3"  
    :limit="2"
    >
    <template slot="singleLabel" slot-scope="{ option }">
    <strong>{{ option.name }}</strong> 由<strong> 
     {{ option.language }}开发的</strong>
     </template>
     <template slot="maxElements">
     最多选中2个选项
     </template>
     <template slot="noResult">
     未找到相关数据
     </template>
      <template slot="beforeList">
     下拉列表顶部beforeList插槽
     </template>
      <template slot="caret"  >
     toggle插槽
     </template> 
       <template slot="limit"  >
     limit插槽
     </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: [
        { name: 'Vue.js', language: 'JavaScript' },
        { name: 'Rails', language: 'Ruby' }, 
        { name: 'www.taobao.com', language: 'java', $isDisabled: true },
        { name: 'www.itxst.com', language: 'C#' }
      ]
    }
  },
   methods: {
     input(value, id){
       console.log(value)
     }
  }
}
</script>

例子