vue-multiselect 教程

vue-multiselect 标签Tagging把用户输入内容添加到下拉框中

当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>

例子

Catalog
vue-multiselect 教程 常用例子 vue-multiselect 单选 vue-multiselect 搜索筛选 vue-multiselect ajax搜索 vue-multiselect 多选 Action dispatcher事件分发器 vue-multiselect 标签Tagging 自定义下拉选项模板 Option groups 下拉选项分组 属性事件 vue-multiselect属性列表 vue-multiselect事件列表