当taggable属性设置为true,所有的下拉选项都没有用户需要的数据时,用户可以在输入框中输入自己的内容,回车后会把用户输入的内容自动添加下拉选项中,这也是实际中经常遇到的一直业务场景。
属性名称 | 说明 |
---|---|
searchable | 需要设置为true ,taggable才能生效,在输入框输入文字 |
tag-position | 追加到下拉选项的位置 top或者bottom |
tag-placeholder | 当用户输入的内容无法在现有的下拉选项中搜索到时的提示文字 |
taggable | 设置为true自动添加用户输入的内容到下拉框 |
<template>
<div style="width:50%">
<multiselect
v-model="value"
deselect-label="已选中"
track-by="name"
label="name"
placeholder="输入关键词或选择"
:options="options"
:close-on-select="false"
:multiple="true"
:taggable="true"
tag-position="bottom"
tag-placeholder="回车添加下拉框"
selectLabel="回车选择"
selectGroupLabel="回车选择整个分组"
selectedLabel="已选择"
deselectLabel="回车取消选择"
deselectGroupLabel="回车取消选择"
@tag="addTag"
>
<template slot="singleLabel" slot-scope="{ option }"><strong>{{ option.name }}</strong> 由<strong> {{ option.language }}开发的</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: [],
options: [
{ name: 'Vue.js', language: 'JavaScript' },
{ name: 'Rails', language: 'Ruby' },
{ name: 'www.jd.com', language: 'C#' },
{ name: 'www.taobao.com', language: 'java', $isDisabled: true },
{ name: 'www.itxst.com', language: 'C#' }
]
}
},
methods:{
addTag (newTag) {
const tag = {
name: newTag,
language: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
this.options.push(tag)
if(this.value) this.value=[];
this.value.push(tag)
}
}
}
</script>
例子