Select 选择器

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

基础用法

适用广泛的基础单选

type为'select'

[
  {
    type: "select",
    name: "select",
    text: "选项",
    placeholder: "请选择",
    options: [
      {
        text: "选项1",
        value: 1
      },
      {
        text: "选项2",
        value: 2
      }
    ]
  }
]

显示配置

有禁用选项

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

[
  {
    type: "select",
    name: "select",
    text: "选项",
    placeholder: "请选择",
    options: [
      {
        text: "选项1",
        value: 1
      },
      {
        text: "选项2",
        value: 2,
        disabled: true
      }
    ]
  }
]

显示配置

禁用状态

选择器不可用状态

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

[
  {
    type: "select",
    name: "select",
    text: "选项",
    placeholder: "请选择",
    disabled: true,
    options: [
      {
        text: "选项1",
        value: 1
      },
      {
        text: "选项2",
        value: 2
      }
    ]
  }
]

显示配置

基础多选

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

[
  {
    type: "select",
    name: "select",
    text: "选项",
    placeholder: "请选择",
    multiple: true,
    options: [
      {
        text: "选项1",
        value: 1
      },
      {
        text: "选项2",
        value: 2
      },
      {
        text: "选项3",
        value: 3
      }
    ]
  }
]

显示配置

分组

备选项进行分组展示

配置group为true

[
  {
    type: "select",
    name: "select",
    text: "选项",
    placeholder: "请选择",
    group: true,
    options: [
      {
        label: "group1",
        options: [
          {
            text: "选项1",
            value: 1
          },
          {
            text: "选项2",
            value: 2
          },
          {
            text: "选项3",
            value: 3
          }
        ],
        disabled: true
      },
      {
        label: "group2",
        options: [
          {
            text: "选项4",
            value: 4
          },
          {
            text: "选项5",
            value: 5
          },
          {
            text: "选项6",
            value: 6
          }
        ]
      }
    ]
  }
]

显示配置

创建条目

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

[
  {
    type: "select",
    name: "select",
    text: "选项",
    placeholder: "请选择",
    allowCreate: true,
    options: [
      {
        text: "选项1",
        value: 1
      },
      {
        text: "选项2",
        value: 2
      }
    ]
  }
]

显示配置

远程选项

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

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

[
  {
    type: "select",
    name: "select",
    text: "选项",
    placeholder: "请选择",
    remote: true,
    option: {
      url: "select/remote",
      root: "data",
      method: "post",
      mode: "cors",
      headers: {
        "Content-Type": "application/json"
      },
      body: {
        query: ""
      },
      json: true,
      text: (option) => `${option.name}`,
      value: (option) => `${option.id}`
    }
  }
]

显示配置

同时在 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	—	-

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	—	—	—