Select 下拉选择框
规则
基础示例
js
const rule = {
type: "select",
field: "cate_id",
title: "产品分类",
value: ["104","105"],
options: [
{"value": "104", "label": "生态蔬菜", "disabled": false},
{"value": "105", "label": "新鲜水果", "disabled": false},
],
props: {
multiple: true
},
}Props 配置示例
单选下拉框
js
const rule = {
type: "select",
field: "category",
title: "商品分类",
value: "104",
options: [
{"value": "104", "label": "生态蔬菜"},
{"value": "105", "label": "新鲜水果"},
{"value": "106", "label": "海鲜水产"},
],
props: {
placeholder: "请选择商品分类",
clearable: true,
},
}多选下拉框
js
const rule = {
type: "select",
field: "tags",
title: "商品标签",
value: ["104","105"],
options: [
{"value": "104", "label": "热销"},
{"value": "105", "label": "新品"},
{"value": "106", "label": "推荐"},
],
props: {
multiple: true,
maxTagCount: 2,
placeholder: "请选择标签",
},
}可搜索下拉框
js
const rule = {
type: "select",
field: "product",
title: "商品名称",
options: [
{"value": "1", "label": "iPhone 15 Pro"},
{"value": "2", "label": "MacBook Pro"},
{"value": "3", "label": "iPad Air"},
],
props: {
filterable: true,
placeholder: "请输入或选择商品",
clearable: true,
},
}远程搜索
js
const rule = {
type: "select",
field: "user",
title: "选择用户",
options: [],
props: {
filterable: true,
remote: true,
placeholder: "请输入用户名搜索",
clearable: true,
loading: false,
},
inject: true,
on: {
search: ($inject, value) => {
if (value) {
// 调用远程搜索接口
searchUsers(value).then(res => {
// 更新选项
$inject.api.updateRule('user', {
options: res.data.map(item => ({
value: item.id,
label: item.name
}))
});
});
}
},
},
}Events 事件示例
监听选择变化
js
const rule = {
type: "select",
field: "category",
title: "商品分类",
options: [
{"value": "104", "label": "生态蔬菜"},
{"value": "105", "label": "新鲜水果"},
],
props: {
placeholder: "请选择分类",
clearable: true,
},
on: {
'update:value': (value, option) => {
console.log('选择值改变:', value, option);
},
blur: () => {
console.log('失去焦点');
},
focus: () => {
console.log('获得焦点');
},
clear: () => {
console.log('清空选择');
},
},
}选择后联动更新其他字段
js
const rule = [
{
type: "select",
field: "category",
title: "商品分类",
options: [
{"value": "1", "label": "电子产品"},
{"value": "2", "label": "服装配饰"},
],
props: {
placeholder: "请选择分类",
},
inject: true,
on: {
'update:value': ($inject, value) => {
// 根据分类加载对应的子分类
if (value === "1") {
$inject.api.updateRule('subcategory', {
options: [
{"value": "11", "label": "手机"},
{"value": "12", "label": "电脑"},
]
});
} else if (value === "2") {
$inject.api.updateRule('subcategory', {
options: [
{"value": "21", "label": "男装"},
{"value": "22", "label": "女装"},
]
});
}
},
},
},
{
type: "select",
field: "subcategory",
title: "子分类",
options: [],
props: {
placeholder: "请先选择分类",
disabled: true,
},
},
]完整配置项:naive-ui_Select
value :Number | String | Array
Options
| 名称 | 类型 | 说明 |
|---|---|---|
| class | string | 自定义一个选项的类名 |
| disabled | boolean | 是否禁用一个选项 |
| label | string | ((option: SelectOption, selected: boolean) => VNodeChild) | 选项的标签，注意如果你使用了渲染函数，默认的过滤器将会过滤该选项 |
| render | (info: { node: VNode, option: SelectOption, selected: boolean }) => VNodeChild | 渲染整个选项 |
| style | string | object | 自定义一个选项的样式 |
| value | string | number | 在选项中应该是唯一的 |
Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| consistent-menu-width | boolean | true | 菜单宽度是否和选择触发器一致，设为 false 会使 virtual-scroll 失效 | |
| clearable | boolean | false | 是否可清空 | |
| clear-filter-after-select | boolean | true | 是否在可过滤和多选的情况下选中一个选项后保留当前的搜索关键词 | 2.25.2 |
| disabled | boolean | false | 是否禁用 | |
| fallback-option | false | (value: string | number) => SelectOption | value => ({ label: '' + value, value }) | 在传入的选项中没有对应当前值的选项时，这个值应该对应的选项。如果设为 false，不会为找不到对应选项的值生成回退选项也不会显示它，未在选项中的值会被视为不合法，操作过程中会被组件清除掉 | |
| filterable | boolean | false | 是否可以过滤 | |
| filter | (pattern: string, option: object) => boolean | 一个简单的字符串搜索算法 | 过滤器函数 | |
| input-props | HTMLInputAttributes | undefined | 触发器中 input 元素的属性，只在可过滤时有意义 | |
| loading | boolean | false | 是否为加载状态 | |
| max-tag-count | number | 'responsive' | undefined | 多选标签的最大显示数量，responsive 会将所有标签保持在一行 | |
| menu-props | HTMLAttributes | undefined | 菜单的 DOM 属性 | |
| multiple | boolean | false | 是否为多选 | |
| options | Array<SelectOption | SelectGroupOption> | [] | 配置选项内容，详情见 SelectOption Properties | |
| placeholder | string | '请选择' | 提示信息 | |
| placement | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start' | 菜单的弹出位置 | 2.25.0 | |
| remote | boolean | false | 是否要异步获取选项。注意如果设定了，那么 filter 和 tag 都不会对 options 生效。这个时候你在全权控制 options | |
| render-label | (option: SelectOption | SelectGroupOption, selected: boolean) => VNodeChild | undefined | 选项标签渲染函数 | |
| render-option | (info: { node: VNode, option: SelectOption | SelectGroupOption, selected: boolean }) => VNodeChild | undefined | 选项的渲染函数 | |
| render-tag | (props: { option: SelectBaseOption, handleClose: () => void }) => VNodeChild | undefined | 控制标签的渲染 | |
| reset-menu-on-options-change | boolean | true | 是否在选项变化时重置菜单状态，例如滚动状态 | 2.24.2 |
| show | boolean | undefined | 是否展示菜单 | |
| show-arrow | boolean | true | 是否展示箭头 | |
| size | 'small' | 'medium' | 'large' | 'medium' | 组件尺寸 | |
| tag | boolean | false | 是否可以创建新的选项，需要和 filterable 一起使用 | |
| virtual-scroll | boolean | true | 是否启用虚拟滚动 | |
| on-blur | () => void | undefined | blur 时执行的回调 | |
| on-clear | () => void | undefined | clear 时执行的回调 | |
| on-create | (label: string) => SelectOption | label => ({ label, value: label }) | 在输入内容时如何创建一个选项。注意 filter 对这个生成的选项同样会生效。同时确保这个选项和其他选项的 value 不要有重复 | |
| on-focus | () => void | undefined | focus 时执行的回调 | |
| on-scroll | (e: ScrollEvent) => void | undefined | 滚动时执行的回调 | |
| on-search | (value: string) => void | undefined | 搜索时执行的回调 | |
| on-update:show | (show: boolean) => void | undefined | 菜单打开状态变化的回调 | 2.24.2 |
| on-update:value | (value: Array | string | number | null, option: SelectBaseOption | null | SelectBaseOption[]) => void | undefined | 值更新时执行的回调 |