vue-multiselect 单选

vue-multiselect 单选代码例子，最简单的使用方式。

关键属性

属性名称	说明
options	下拉选项数组，['a','b']或者[{lable:'a',value:'100'},{lable:'b',value:'200'}]
close-on-select	选择后是否关闭下拉层
show-labels	是否显示已选中提示
searchable	是否开启客户端搜索筛选
singleLabel	选中后显示在输入框插槽
track-by	options为对象数组时由那个属性作为key,比如上面的value

单选字符串

<template>
 <div style="width:50%;margin-left:10px;"> 
  <multiselect 
  v-model="value" 
  :options="options" 
  :searchable="false" 
  :close-on-select="true" 
  :show-labels="false"
   placeholder="请选择"
   selectLabel="回车选择"
   selectGroupLabel="回车选择整个分组"
   selectedLabel="已选择"
   deselectLabel="回车取消选择"
   deselectGroupLabel="回车取消选择" 
   >
   </multiselect>
   <div>您选择的是：
   {{ value  }} 
   </div>
</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: ['浙江省','江西省','广东省','www.itxst.com' ]
    }
  }
}
</script>

单选对象

<template>
 <div style="margin: auto;width:50%">
  <multiselect v-model="value" deselect-label="Can't remove this value" 
   track-by="name"
   label="name" 
   placeholder="请选择" 
   :options="options"
   :searchable="false"
   :allow-empty="false"
    placeholder="请选择"
    selectLabel="回车选择"
    selectGroupLabel="回车选择整个分组"
    selectedLabel="已选择"
    deselectLabel="回车取消选择"
    deselectGroupLabel="回车取消选择"    
   >
    <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: null,
      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#' }
      ]
    }
  }
}
</script>

例子