tmagic-editor/docs/form-config/fields/select.md

Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

基础用法

适用广泛的基础单选

<template #source>

type为'select'

有禁用选项

<template #source>

在 options 选项配置中，设定 disabled 值为 true，即可禁用该选项

禁用状态

选择器不可用状态

<template #source>

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

基础多选

适用性较广的基础多选，用 Tag 展示已选项

分组

备选项进行分组展示

<template #source>

配置group为true

创建条目

可以创建并选中选项中不存在的条目

远程选项

通过接口请求获取选项列表

<template #source>

配置remote为true，然后配置option，而不是options

同时在 src/main.ts 中需要自定义实现请求

app.use(MagicForm, {
  request: async (options: any) => {
    // 自定义请求实现
  },
});

:::tip 如果 Select 的绑定值为对象类型，请务必指定 valueKey 作为它的唯一性标识。 :::

Select Attributes

参数	说明	类型	可选值	默认值
name	绑定值	string	—	—
placeholder	输入框占位文本	string	—	—
text	表单标签	string	—	—
disabled	是否禁用	boolean / FilterFunction	—	false
multiple	是否多选	boolean	—	false
valueKey	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
allowCreate	是否允许用户创建新条目	boolean	—	false
remote	是否为远程搜索	boolean	—	false
group	是否选择分组	boolean	—	false
onChange	值变化时触发的函数	OnChangeHandler	—	-
options	选项	Array	—	-
option	选项	Object	—	-

::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义 <<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}

<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}

<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}

<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}

<<< @/../packages/form-schema/src/base.ts#FormValue{ts} :::

配置类型

::: details 查看 SelectConfig 配置类型定义 <<< @/../packages/form-schema/src/base.ts#SelectConfig{ts}

<<< @/../packages/form-schema/src/base.ts#FormItem{ts}

<<< @/../packages/form-schema/src/base.ts#Input{ts}

:::

options item

参数	说明	类型	可选值	默认值
text		选项的标签	string/number/object	—	—
value	选项的值	string	—	—
disabled	是否禁用	boolean	—	false
label	string	—	—	—
options	Array	—	—	—

option

参数	说明	类型	可选值	默认值
url	string	—	—	—
root	string	—	—	—
text	string / Function	—	—	—
value	string / Function	—	—	—