简体中文
FxSelect
约 2497 字大约 8 分钟
2025-12-16
当选项过多时,使用下拉菜单展示并选择内容。
基础用法&禁用选项
适用广泛的基础单选
<template>
<fx-select
ref="el1"
v-model="value"
:el-style="selectStyle"
:options="options"
:before-change="beforeChange"
@change="change"
@focus="focus"
></fx-select>
<fx-select
ref="el2"
:el-style="{width:'200px'}"
v-model="value"
width="200"
:options="options"
filterable
size="medium"
:before-change="beforeChange"
@change="change"
@focus="focus"
></fx-select>
<fx-select
ref="el3"
v-model="value"
width="200"
:options="options"
filterable
size="small"
:before-change="beforeChange"
@change="change"
@focus="focus"
></fx-select>
<!-- <fx-button @click="getValue">getValue()</fx-button> -->
<!-- <fx-button @click="setValue">setValue()</fx-button> -->
</template>
<script>
export default {
data() {
return {
value: '',
selectStyle:{width:'300px'},
options: [{
value: 'Beijing',
label: '北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京',
},
{
value: 'Shanghai',
label: '上海',
disabled: true,
},
{
value: 'Nanjing',
label: '南京',
},
{
value: 'Chengdu',
label: '成都',
},
{
value: 'Shenzhen',
label: '深圳',
},
{
value: 'Guangzhou',
label: '广州',
}]
}
},
methods:{
beforeChange(val,oldVal){
console.log('beforeChange...',val,oldVal)
// if (val==='Shanghai') {
// return false;
// }
},
getValue(){
let v=this.$refs.el1.getValue();
console.log(v,this.value);
},
setValue(){
this.$refs.el1.setValue('Chengdu')
},
change(val) {
console.log('change:', val,this.value);
},
focus(event) {
console.log('focus:', event);
},
},
created(){
}
};
</script>禁用状态
选择器不可用状态
<template>
<fx-select v-model="value" :options="options" disabled></fx-select>
</template>
<script>
export default {
data() {
return {
value: '',
disabled: true,
options: [
{
value: 'Beijing',
label: '北京',
},
{
value: 'Shanghai',
label: '上海',
}
]
};
},
};
</script>可清空单选
包含清空按钮,可将选择器清空为初始状态
<template>
<fx-select placeholder="请选择" v-model="value" :options="options" clearable filterable></fx-select>
</template>
<script>
export default {
data() {
return {
value: 'Shanghai',
options: [
{
value: 'Beijing',
label: '北京',
},
{
value: 'Shanghai',
label: '上海',
},
{
value: 'Nanjing',
label: '南京',
},
{
value: 'Chengdu',
label: '成都',
},
{
value: 'Shenzhen',
label: '深圳',
},
{
value: 'Guangzhou',
label: '广州',
},
]
};
},
};
</script>基础多选
适用性较广的基础多选,用 Tag 展示已选项
<template>
<div style="overflow:hidden;">
<fx-select
placeholder="请选择"
v-model="value"
:options="options"
multiple
filterable
clearable
v-show="show"
:disabled="disabled"
>
<!-- <span slot="tag" slot-scope="props">{{ props.data.currentLabel }},222</span> -->
</fx-select>
<fx-select
placeholder="请选择"
v-model="value"
:options="options"
multiple
filterable
size="medium"
v-show="show"
:disabled="disabled"
></fx-select>
<fx-select
placeholder="请选择"
v-model="value"
:options="options"
multiple
filterable
size="small"
v-show="show"
:disabled="disabled"
></fx-select>
<fx-select
placeholder="请选择"
v-model="value2"
:options="options"
multiple
filterable
collapse-tags
@change="onChange"
>
</fx-select>
<fx-select
placeholder="请选择"
v-model="value2"
:options="options"
size="medium"
multiple
filterable
collapse-tags
>
</fx-select>
<fx-select
placeholder="请选择"
v-model="value2"
:options="options"
size="small"
multiple
filterable
collapse-tags
>
</fx-select>
</div>
</template>
<script>
export default {
data() {
return {
// value: ['Shanghai','Shanghai2','Chengdu','Shenzhen'],
value: [],
disabled:false,
show:true,
options: [
{
value: 'Beijing',
label: '北京',
},
{
value: 'Shanghai',
label: '上海',
},
{
value: 'Nanjing',
label: '南京',
},
{
value: 'Chengdu',
label: '成都',
},
{
value: 'Shenzhen',
label: '深圳',
},
{
value: 'Guangzhou',
label: '广州',
},
],
value2: 'Shanghai',
};
},
methods:{
onChange(val) {
console.log('change:', val);
},
}
};
</script>自定义模板
可以自定义备选项
<template>
<fx-select placeholder="请选择" v-model="value" :options="options" @change="onChange" option-value-key="value2">
<template slot="options" slot-scope="slotProps">
<span style="float: left">{{ slotProps.data.label2 }}</span>
<span style="float: right; color: #8492a6;">{{ slotProps.data.value2 }}</span>
</template>
</fx-select>
</template>
<script>
export default {
data() {
return {
value: 'Shanghai',
options: [
{
value2: 'Beijing',
label2: '北京',
},
{
value2: 'Shanghai',
label2: '上海',
},
{
value2: 'Nanjing',
label2: '南京',
},
{
value2: 'Chengdu',
label2: '成都',
}
],
};
},
methods:{
onChange(val) {
console.log('change:', val,this.value);
},
}
};
</script>分组
备选项进行分组展示
<template>
<fx-select placeholder="请选择" v-model="value" is-option-group :options="options"></fx-select>
</template>
<script>
export default {
data() {
return {
value: 'Shanghai',
isOptionGroup: true,
options: [{
label: '热门城市',
options: [{
value: 'Shanghai',
label: '上海'
}, {
value: 'Beijing',
label: '北京'
}]
}, {
label: '城市名',
options: [{
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳',
disabled: true
}, {
value: 'Guangzhou',
label: '广州'
}, {
value: 'Dalian',
label: '大连'
}]
}]
};
},
};
</script>创建条目
可以创建并选中选项中不存在的条目
<template>
<fx-select
v-model="value"
:options="options"
filterable
allow-create
default-first-option
placeholder="请选择文章标签"
@change="onChange">
</fx-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'HTML',
label: 'HTML'
}, {
value: 'CSS',
label: 'CSS'
}, {
value: 'JavaScript',
label: 'JavaScript'
}],
value: []
}
},
methods:{
onChange(val) {
console.log('change:', val);
},
}
}
</script>Select Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value / v-model | 绑定值 | string/array | — | - |
| options | 选项列表,选项属性参见“Option Attributes” | array | — | [] |
| multiple | 是否多选 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
| value-key | 作为 value 唯一标识的键名,绑定值为对象类型时必填 | string | — | value |
| option-value-key | 作为options中 value 唯一标识的键名 | string | — | value |
| size | 输入框尺寸 | string | medium/small/mini | — |
| clearable | 是否可以清空选项 | boolean | — | false |
| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
| multiple-limit | 多选时用户最多可以选择的项目数,为 0 则不限制 | number | — | 0 |
| name | select input 的 name 属性 | string | — | — |
| autocomplete | select input 的 autocomplete 属性 | string | — | off |
| placeholder | 占位符 | string | — | 请选择 |
| filterable | 是否可搜索 | boolean | — | false |
| allow-create | 是否允许用户创建新条目,需配合 filterable 使用 | boolean | — | false |
| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
| popper-class | Select 下拉框的类名 | string | — | — |
| reserve-keyword | 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
| default-first-option | 在输入框按下回车,选择第一个匹配项。需配合 filterable 或 remote 使用 | boolean | - | false |
| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false | boolean | - | true |
| automatic-dropdown | 对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单 | boolean | - | false |
| is-option-group | 是否是分组选项 | boolean | - | false |
| validate-when-options-change | 更新options时是否触发验证 | boolean | - | - |
Select Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 选中值发生变化时触发,function(val) | 当前的选中值 |
| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true,隐藏则为 false |
| remove-tag | 多选模式下移除tag时触发 | 移除的tag值 |
| clear | 可清空的单选模式下用户点击清空按钮时触发 | — |
| blur | 当 input 失去焦点时触发 | (event: Event) |
| focus | 当 input 获得焦点时触发 | (event: Event) |
Option Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 选项的值,如果该项为“其他”项,约定其值为"other" | string/number | — | — |
| label | 选项的标签,若不设置则默认与 value 相同 | string/number | — | — |
| disabled | 是否禁用该选项 | boolean | — | false |
| isOther | 标识该项是否为“其他”项。注:is-option-group为true时不支持“其他”选项 | boolean | - | - |
| isRequired | 标识选中“其他”项,输入框是否为必填 | boolean | - | - |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| focus | 使 input 获取焦点 | - |
| blur | 使 input 失去焦点,并隐藏下拉框 | - |
| before-change | 选择值生效前的钩子函数,如果返回false,则选择不生效 | - |
| resetInputHeight | 计算组件高度 | - |
