依赖

Vue 2.6.14+

Element-UI 2.15.8+

安装

npm install @mypandora/element-select

Select 选择器

展开下拉框，使用多个单选按钮组进行选择。

基础用法

适用广泛的基础单选 :::demo v-model的值为当前被选中的my-option的 value 属性值

<template>
  <my-select v-model="value" collapseTags placeholder="Select an option" valueKey="level">
    <my-option v-for="item in levels" :key="item.label" :optionItem="item"></my-option>
  </my-select>
</template>

<script>
  const groups = [
    { label: '全部', value: 10 },
    { label: '优秀', value: 1 },
    { label: '良好', value: 0 },
    { label: '一般', value: -1 },
    { label: '差', value: -2 },
  ];

  export default {
    data() {
      return {
        value: null,
        levels: [
          {
            level: 1,
            name: '国家',
            groups,
          },
          {
            level: 2,
            name: '省',
            groups,
          },
          {
            level: 3,
            name: '市',
            groups,
          },
          {
            level: 4,
            name: '县/区',
            groups,
          },
          {
            level: 5,
            name: '乡/镇',
            groups,
          },
          {
            level: 6,
            name: '村',
            groups,
          },
        ],
      };
    }
  }
</script>

:::

有禁用选项

:::demo 在my-option中，设定disabled值为 true，即可禁用该选项

<template>
  <my-select v-model="value" collapseTags placeholder="Select an option" valueKey="level">
    <my-option v-for="item in levels" :key="item.label" :optionItem="item"
               :disabled="item.disabled"></my-option>
  </my-select>
</template>

<script>
  const groups = [
    { label: '全部', value: 10 },
    { label: '优秀', value: 1 },
    { label: '良好', value: 0 },
    { label: '一般', value: -1 },
    { label: '差', value: -2 },
  ];
  export default {
    data() {
      return {
        value: null,
        levels: [
          {
            level: 1,
            name: '国家',
            groups,
          },
          {
            level: 2,
            name: '省',
            groups,
            disabled: true,
          },
          {
            level: 3,
            name: '市',
            groups,
          },
          {
            level: 4,
            name: '县/区',
            groups,
          },
          {
            level: 5,
            name: '乡/镇',
            groups,
          },
          {
            level: 6,
            name: '村',
            groups,
          },
        ],
      }
    }
  }
</script>

:::

禁用状态

选择器不可用状态

:::demo 为my-select设置disabled属性，则整个选择器不可用

<template>
  <my-select v-model="value" collapseTags placeholder="Select an option" valueKey="level" disabled>
    <my-option v-for="item in levels" :key="item.label" :optionItem="item"></my-option>
  </my-select>
</template>

<script>
  const groups = [
    { label: '全部', value: 10 },
    { label: '优秀', value: 1 },
    { label: '良好', value: 0 },
    { label: '一般', value: -1 },
    { label: '差', value: -2 },
  ];

  export default {
    data() {
      return {
        value: null,
        levels: [
          {
            level: 1,
            name: '国家',
            groups,
          },
          {
            level: 2,
            name: '省',
            groups,
          },
          {
            level: 3,
            name: '市',
            groups,
          },
          {
            level: 4,
            name: '县/区',
            groups,
          },
          {
            level: 5,
            name: '乡/镇',
            groups,
          },
          {
            level: 6,
            name: '村',
            groups,
          },
        ],
      }
    }
  }
</script>

:::

可清空单选

包含清空按钮，可将选择器清空为初始状态

:::demo 为my-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

<template>
  <my-select v-model="value" collapseTags clearable placeholder="Select an option" valueKey="level">
    <my-option v-for="item in levels" :key="item.label" :optionItem="item"></my-option>
  </my-select>
</template>

<script>
  const groups = [
    { label: '全部', value: 10 },
    { label: '优秀', value: 1 },
    { label: '良好', value: 0 },
    { label: '一般', value: -1 },
    { label: '差', value: -2 },
  ];

  export default {
    data() {
      return {
        value: null,
        levels: [
          {
            level: 1,
            name: '国家',
            groups,
          },
          {
            level: 2,
            name: '省',
            groups,
          },
          {
            level: 3,
            name: '市',
            groups,
          },
          {
            level: 4,
            name: '县/区',
            groups,
          },
          {
            level: 5,
            name: '乡/镇',
            groups,
          },
          {
            level: 6,
            name: '村',
            groups,
          },
        ],
      }
    }
  }
</script>

Select Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
name	select input 的 name 属性	string	—	—
placeholder	占位符	string	—	请选择
popper-class	Select 下拉框的类名	string	—	—
popper-append-to-body	是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false	boolean	-	true
automatic-dropdown	对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	boolean	-	false
formatter	格式化 tag 显示的内容	function	-	-

Select Events

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

Select Slots

name	说明
—	Option 组件列表
prefix	Select 组件头部内容
empty	无选项时的列表

Option Attributes

参数	说明	类型	可选值	默认值
optionItem	选项数据	object	—	—
optionItemName	选项的名称	string	—	name
radioGroupKey	选项中单选按钮组的属性	string	—	groups
radioValue	单选按钮的值属性	string	—	value
radioKey	单选按钮的名称属性	string	—	label
disabled	是否禁用该选项	boolean	—	false

Methods

方法名	说明	参数
focus	使 input 获取焦点	-
blur	使 input 失去焦点，并隐藏下拉框	-