vm-select

安装

npm install -D vm-select 

全局引入

import vmSelect from 'vm-select'
Vue.use(vmSelect)

or组件内引入

import vmSelect from 'vm-select'

export default {
  ...
  components: {
    vmSelect
  }
  ...
}

使用方式

<template>
  <div id="app">
    <vm-select :options="option" v-model="models"></vm-select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      option: [1, 2, 3, 4, 5],
      model: 1
    }
  }
}
</script>

API

select props

| 属性 | 说明 | 类型| 默认值 | ------- | ---------------------------|----------|-------- | value | 可以使用 v-model 双向绑定数据 | Array, String, Number| | | options | 数据集合 | Array | | | multiple | 是否多选 | Boolean | false | | search | 是否开启筛选 | Boolean | false | | label | option 项显示属性 | String | | | labelKey | option 返回项 | String | | | disabled | 是否禁用 | Boolean | false | | customDisabled | 是否禁用option项 | Function | | | placeholder | placeholder 为空提示文案 | String | 请输入 | | maxRender | 最大 | Number | 50 |

select events

| 事件名称 | 说明 | 返回值 | ------- | -----------------------------------|---------- | on-change | option 被点击时触发 | value，option(当前项)