vue-multiselect提供了多达11个插槽可以对各个功能进行自定义。
插槽列表
插槽名称 | 描述 |
---|---|
option | *下拉选项插槽 slot-scope: option 下拉选项对象 search 搜索关键词 |
maxElements | 最多选中N个选项插槽 |
noResult | *未找到相关数据插槽 |
noOptions | 没有下拉选项时的插槽 |
beforeList | 下拉项目顶部插槽 |
afterList | 下拉项目底部插槽 |
caret | 打开和关闭下拉选项插槽 |
singleLabel | *下拉选项显示给用户看的内容插槽 |
placeholder | 提示内容插槽 |
limit | 选择时超过设定的数量时显示的插槽,默认为more, 前提条件是多选和设置了limit属性的数据量,下面的在线例子请选中3个选项看效果 |
clear | 清除选中项插槽 |
tag | Slot-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>
例子