# Select 选择器 | tmagic-editor
页面可视化平台

Skip to content

# 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` 中需要自定义实现请求

typescript

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