Select 选择器

大约 5 分钟

Select 选择器

下拉选择器。

何时使用

弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。

代码演示

基本用法
基本用法。

使用 f-select-option

使用 options (recommend)

<template>
  <div>使用 f-select-option</div>
  <div class="fs-select-docx-box">
    <f-select
      ref="select"
      v-model:value="value1"
      style="width: 120px"
      @focus="focus"
      placeholder="请选择"
      allowClear
      @change="handleChange"
    >
      <f-select-option value="jack">Jack</f-select-option>
      <f-select-option value="lucy">Lucy</f-select-option>
      <f-select-option value="disabled" disabled>Disabled</f-select-option>
      <f-select-option value="Yiminghe">yiminghe</f-select-option>
    </f-select>
    <f-select v-model:value="value2" style="width: 120px" disabled>
      <f-select-option value="lucy">Lucy</f-select-option>
    </f-select>
    <f-select v-model:value="value3" style="width: 120px" loading> </f-select>
    <f-select v-model:value="value4" style="width: 120px" press-line="下拉选择框">
      <f-select-option value="lucy">Lucy</f-select-option>
    </f-select>
  </div>
  <div style="margin-top: 10px">使用 options (recommend)</div>
  <div class="fs-select-docx-box">
    <f-select
      ref="select"
      placeholder="请选择"
      v-model:value="value1"
      style="width: 120px"
      :options="options1"
      allowClear
      @focus="focus"
      @change="handleChange"
    ></f-select>
    <f-select v-model:value="value2" style="width: 120px" disabled :options="options2"></f-select>
    <f-select v-model:value="value3" style="width: 120px" loading :options="options3"></f-select>
    <f-select v-model:value="value4" style="width: 120px" :options="options3" press-line="下拉选择框"></f-select>
  </div>
</template>
<script lang="ts">
import type { SelectProps } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const options1 = ref<SelectProps['options']>([
      {
        value: 'jack',
        label: 'Jack',
      },
      {
        value: 'lucy',
        label: 'Lucy',
      },
      {
        value: 'disabled',
        label: 'Disabled',
        disabled: true,
      },
      {
        value: 'yiminghe',
        label: 'Yiminghe',
      },
    ])
    const options2 = ref<SelectProps['options']>([
      {
        value: 'lucy',
        label: 'Lucy',
      },
    ])
    const options3 = ref<SelectProps['options']>([
      {
        value: 'lucy',
        label: 'Lucy',
      },
    ])
    const focus = () => {
      console.log('focus')
    }

    const handleChange = (value: string) => {
      console.log(`selected ${value}`)
    }

    return {
      focus,
      handleChange,
      value1: ref('lucy'),
      value2: ref('lucy'),
      value3: ref('lucy'),
      value4: ref('lucy'),
      options1,
      options2,
      options3,
    }
  },
})
</script>
<style>
.fs-select-docx-box > .fs-select {
  margin-right: 20px;
  margin-bottom: 20px;
}
</style>

三种大小
三种大小的选择框，当 size 分别为 large 和 small 时，输入框高度为 40px 和 24px ，默认高度为 32px。

最多显示多少个选项及选项最大长度
设置一个数字，超过后自动折叠。
maxTagCount 也可以设置成响应式，但响应式对性能有所消耗，不推荐在大表单场景下使用。

maxTagCount: 2

多选提示框展示选中的内容

maxTagCount: responsive

maxTagTextLength: 10

<template>
  <div class="fs-select-docx-box">
    <div>
      <f-button type="primary" @click="maxTagCount++" style="margin-right: 12px;">maxTagCount++</f-button>
      <f-button type="primary" @click="maxTagCount--">maxTagCount--</f-button>
    </div>

    <div>maxTagCount: {{ maxTagCount }}</div>
    <f-select
      v-model:value="value"
      mode="multiple"
      style="width: 100%"
      placeholder="Select Item..."
      :max-tag-count="maxTagCount"
      :options="options"
    >
      <template #maxTagPlaceholder="omittedValues">
        <span style="color: red">+ {{ omittedValues.length }} ...</span>
      </template>
    </f-select>
    <div>多选提示框展示选中的内容</div>
    <div>maxTagCount: responsive</div>
    <f-select
      v-model:value="value"
      mode="multiple"
      style="width: 100%"
      placeholder="Select Item..."
      max-tag-count="responsive"
      :options="options"
      showMaxTagPlaceholder
      :tooltips="{
        placement: 'bottomLeft',
        color: '#fff',
        textColor: '#333',
        contentHeight: 50,
        align: '{ offset: [0, 0] }',
        destroyTooltipOnHide: false
      }"
    ></f-select>
    <div>
      <f-button type="primary" @click="maxTagTextLength++" style="margin-right: 12px;">maxTagTextLength++</f-button>
      <f-button type="primary" @click="maxTagTextLength--">maxTagTextLength--</f-button>
    </div>
    <div>maxTagTextLength: {{ maxTagTextLength }}</div>
    <f-select
      v-model:value="value"
      mode="multiple"
      style="width: 100%"
      placeholder="Select Item..."
      :max-tag-text-length="maxTagTextLength"
      :options="options"
    ></f-select>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const options = ref<any[]>([])
    for (let i = 10; i < 36; i++) {
      const value = i.toString(36) + i
      options.value.push({
        label: `Long Label: ${value}`,
        value,
      })
    }
    const maxTagCount = ref(2)
    const maxTagTextLength = ref(10)
    return {
      value: ref(['a10', 'c12', 'h17', 'j19', 'k20']),
      options,
      maxTagCount,
      maxTagTextLength,
    }
  },
})
</script>
<style>
.fs-select-docx-box > .fs-select {
  margin-right: 20px;
  margin-bottom: 20px;
}
</style>

分组
设置一个数字，超过后自动折叠。
用 OptGroup 或 options.options 进行选项分组。

CheckBox 多选
设置一个数字，超过后自动折叠。
用 OptGroup 或 options.options 进行选项分组。

注意：使用 f-select-option 不支持这种模式

支持分组多选

<template>
  <div class="fs-select-docx-box">
    <f-select
      v-model:value="value"
      mode="checkbox-multiple"
      style="width: 200px"
      placeholder="Select Item..."
      max-tag-count="responsive"
      :options="options"
    >
    </f-select>

    <f-select
      v-model:value="value"
      mode="checkbox-multiple"
      style="width: 200px"
      placeholder="Select Item..."
      max-tag-count="responsive"
      :options="options2"
      :fieldNames="{ label: 'label1', value: 'value1' }"
    ></f-select>

    <p>注意：使用 <span style="color: #c41d7f">f-select-option</span> 不支持这种模式</p>
    <f-select
      v-model:value="value"
      mode="checkbox-multiple"
      style="width: 200px"
      placeholder="Select Item..."
      max-tag-count="responsive"
    >
      <f-select-option v-for="(item, index) in options" :key="index" :value="item.value">
        {{ item.label }}
      </f-select-option>
    </f-select>

    <p>支持分组多选</p>
    <f-select
      mode="checkbox-multiple"
      style="width: 200px"
      placeholder="Select Item..."
      max-tag-count="responsive"
      :options="options3"
    >
    </f-select>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const options = ref<any[]>([])
    const options2 = ref<any[]>([])
    for (let i = 10; i < 36; i++) {
      const value = i.toString(36) + i
      options.value.push({
        label: `Long Label: ${value}`,
        value,
      })
      options2.value.push({
        label1: `Long Label: ${value}`,
        value1: value,
      })
    }
    const options3 = [
      {
        label: 'Manager',
        options: [
          {
            value: 'jack',
            label: 'Jack',
          },
          {
            value: 'lucy',
            label: 'Lucy',
          },
        ],
      },
      {
        label: 'Engineer',
        options: [
          {
            value: 'yiminghe',
            label: 'Yiminghe',
          },
        ],
      },
    ]
    return {
      value: ref(['a10', 'c12', 'h17', 'j19', 'k20']),
      options,
      options2,
      options3
    }
  },
})
</script>
<style>
.fs-select-docx-box > .fs-select {
  margin-right: 20px;
  margin-bottom: 20px;
}
</style>

API

Select props

参数	说明	类型	默认值	版本
`pressLine` `新增`	组件右上角文本	string
`showMaxTagPlaceholder` `新增`	是否展示超出内容文案	boolean	false
`tooltips` `新增`	Tooltip文字提示组件展示文本，组件参数说明参考Tooltip文字提示组件，新增两个属性 `textColor`，`contentHeight`	`textColor:string` `contentHeight:number`
allowClear	支持清除	boolean	false
autoClearSearchValue	是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效。	boolean	true
autofocus	默认获取焦点	boolean	false
bordered	是否有边框	boolean	true
clearIcon	自定义的多选框清空图标	VNode \| slot	-
defaultActiveFirstOption	是否默认高亮第一个选项。	boolean	true
defaultOpen	是否默认展开下拉菜单	boolean	-
disabled	是否禁用	boolean	false
dropdownClassName	下拉菜单的 className 属性	string	-
dropdownMatchSelectWidth	下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动	boolean \| number	true
dropdownMenuStyle	dropdown 菜单自定义样式	object	-
dropdownRender	自定义下拉框内容	({menuNode: VNode, props}) => VNode \| v-slot	-
dropdownStyle	下拉菜单的 style 属性	object	-
fieldNames	自定义节点 label、value、options 的字段	object	{ label: `label`, value: `value`, options: `options` }	3.0
filterOption	是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。	`boolean` \| `function(inputValue, option)`	true
filterSort	搜索时对筛选结果项的排序函数, 类似Array.sortopen in new window里的 compareFunction	(optionA: Option, optionB: Option) => number	-	3.0
firstActiveValue	默认高亮的选项	string\|string[]	-
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。	function(triggerNode)	() => document.body
labelInValue	是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes, originLabel: any}` 的格式, originLabel（3.1）保持原始类型，如果通过 a-select-option children 构造的节点，该值是是个函数（即 a-select-option 的默认插槽）	boolean	false
listHeight	设置弹窗滚动高度	number	256
maxTagCount	最多显示多少个 tag	number	-
maxTagPlaceholder	隐藏 tag 时显示的内容	slot \| function(omittedValues)	-
maxTagTextLength	最大显示的 tag 文本长度	number	-
menuItemSelectedIcon	自定义当前选中的条目图标	VNode \| slot	-
mode	设置 Select 的模式为多选或标签	multiple \| tags \| combobox \| `新增 checkbox-multiple`	-
notFoundContent	当下拉列表为空时显示的内容	string\|slot	`Not Found`
open	是否展开下拉菜单	boolean	-
option	通过 option 插槽，自定义节点	v-slot:option="{value, label, [disabled, key, title]}"	-	2.2.5
optionFilterProp	搜索时过滤对应的 option 属性，不支持 children	string	value
optionLabelProp	回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。	string	`children` \| `label`(设置 options 时)
options	options 数据，如果设置则不需要手动构造 selectOption 节点	array<{value, label, [disabled, key, title]}>	[]
placeholder	选择框默认文字	string\|slot	-
removeIcon	自定义的多选框清除图标	VNode \| slot	-
searchValue	控制搜索文本	string	-
showArrow	是否显示下拉小箭头	boolean	单选为true,多选为false
showSearch	配置是否可搜索	boolean	单选为false,多选为true
size	选择框大小，可选 `large` `small`	string	default
suffixIcon	自定义的选择框后缀图标	VNode \| slot	-
tagRender	自定义 tag 内容 render，仅在 `mode` 为 `multiple` 或 `tags` 时生效	slot \| (props) => any	-	3.0
tokenSeparators	在 tags 和 multiple 模式下自动分词的分隔符	string[]
value(v-model)	指定当前选中的条目	string\|string[]\|number\|number[]	-
virtual	设置 false 时关闭虚拟滚动	boolean	true	3.0

注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。

事件

事件名称	说明	回调参数
blur	失去焦点的时回调	function
change	选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数	function(value, option:Option/Array<Option>)
deselect	取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效	function(value，option:Option)
dropdownVisibleChange	展开下拉菜单的回调	function(open)
focus	获得焦点时回调	function
inputKeyDown	键盘按下时回调	function
mouseenter	鼠标移入时回调	function
mouseleave	鼠标移出时回调	function
popupScroll	下拉列表滚动时的回调	function
search	文本框值变化时回调	function(value: string)
select	被选中时调用，参数为选中项的 value (或 key) 值	function(value, option:Option)

Select Methods

名称	说明
blur()	取消焦点
focus()	获取焦点

Option props

参数	说明	类型	默认值
class	Option 器类名	string	-
disabled	是否禁用	boolean	false
key	和 value 含义一致。如果 Vue 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置	string
title	选中该 Option 后，Select 的 title	string	-
value	默认根据此属性值进行筛选	string\|number	-

OptGroup props

参数	说明	类型	默认值
key		string	-
label	组名	string\|function(h)\|slot	无

Select 选择器

# Select 选择器

# 何时使用

# 代码演示

# API

# Select props

# 事件

# Select Methods

# Option props

# OptGroup props

Select 选择器

何时使用

代码演示

API

Select props

事件

Select Methods

Option props

OptGroup props