Select

封装选择器

使用

基础用法

传入 data 数据,自动生成选项

<template>
  <pro-select
    v-model="select"
    :data="data"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      data,
    }
  },
})
</script>
显示代码

控制不可选项目

将传入 data 数据中的某项设置为 disabled: true 即可

<template>
  <pro-select
    v-model="select"
    :data="list"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const list = ref([
      { value: 'Go', label: 'go', disabled: true },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      list,
    }
  },
})
</script>
显示代码

配置绑定数据键值

通过 config 配置数据键值。value- v-model 绑定的键值、label-显示键值、disabled-控制不可选的键值、children-子分组的键值

<template>
  <pro-select
    v-model="select"
    :data="data"
    :config="config"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const config = ref({ value: 'label', label: 'value' })
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      config,
      data,
    }
  },
})
</script>
显示代码

使用插槽

通过默认插槽可以自定义备选项

<template>
  <pro-select
    v-model="select"
    :data="data"
    :config="config"
  >
    <template #default="{ data: item }">
      <span>{{ item.label }}</span>
      <span style="float: right">{{ item.value }}</span>
    </template>
  </pro-select>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const config = ref({ value: 'label', label: 'value' })
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      config,
      data,
    }
  },
})
</script>
显示代码

开启多选

multipletrue 时,启用多选。此时绑定的 model-value 为数组格式

<template>
  <pro-select
    v-model="select"
    :data="data"
    multiple
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref([])
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      data,
    }
  },
})
</script>
显示代码

分组

通过 data 中的 children 字段配置可以轻松生成分组展示 (如果有多层分组,推荐使用 TreeSelect)

<template>
  <pro-select
    v-model="select"
    :data="data"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const data = ref([
      {
        label: 'Popular cities',
        children: [
          {
            value: 'Shanghai',
            label: 'Shanghai',
          },
          {
            value: 'Beijing',
            label: 'Beijing',
          },
        ],
      },
      {
        label: 'City name',
        children: [
          {
            value: 'Chengdu',
            label: 'Chengdu',
          },
          {
            value: 'Shenzhen',
            label: 'Shenzhen',
          },
          {
            value: 'Guangzhou',
            label: 'Guangzhou',
          },
          {
            value: 'Dalian',
            label: 'Dalian',
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>
显示代码

配置

参数说明类型可选值默认值
v-model绑定值array--
data绑定数据array--
config配置绑定数据键值object-{ value: ‘value’, label: ‘label’, disabled: ‘disabled’, children: ‘children’ }
multiple是否多选boolean-false
disabled是否禁用boolean-false
size尺寸stringlarge / default /small-
clearable是否可以清空选项boolean-false
collapse-tags多选时是否将选中值按文字的形式展示boolean-false
multiple-limit多选时用户最多可以选择的项目数,为 0 则不限制number-0
nameselect input 的 name 属性string--
autocompleteselect input 的 autocomplete 属性stringon / offoff
placeholder占位符string-请选择
filterable是否可搜索boolean-false
allow-create是否允许用户创建新条目,需配合 filterable 使用boolean-false
filter-method自定义搜索方法function--
remote是否为远程搜索boolean-false
remote-method远程搜索方法function--
loading是否正在从远程获取数据boolean-false
loading-text远程加载时显示的文字string-加载中
no-match-text搜索条件无匹配时显示的文字,也可以使用#empty 设置string-无匹配数据
no-data-text选项为空时显示的文字,也可以使用#empty 设置string-无数据
popper-classSelect 下拉框的类名string--
reserve-keyword多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词boolean-false
default-first-option在输入框按下回车,选择第一个匹配项。配合 filterable 或 remote 使用boolean-false
popper-append-to-body是否将弹出框插入至 body 元素boolean-false
automatic-dropdown对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单boolean-false
clear-icon自定义清空图标的类名string-el-icon-circle-close

事件

名称说明回调参数
change选中值发生变化时触发目前的选中值
visible-change下拉框出现/隐藏时触发出现则为 true,隐藏则为 false
remove-tag多选模式下移除 tag 时触发移除的 tag 值
clear可清空的单选模式下用户点击清空按钮时触发
blur当 input 失去焦点时触发(event: Event)
focus当 input 获得焦点时触发(event: Event)

插槽

名称说明
-自定插槽内容,参数为 { data }