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 / FilterFunctionfalse
multiple是否多选booleanfalse
valueKey作为 value 唯一标识的键名,绑定值为对象类型时必填stringvalue
allowCreate是否允许用户创建新条目booleanfalse
remote是否为远程搜索booleanfalse
group是否选择分组booleanfalse
onChange值变化时触发的函数OnChangeHandler -
options选项Array-
option选项Object-

options item

参数说明类型可选值默认值
text选项的标签string/number/object
value选项的值string
disabled是否禁用booleanfalse
labelstring
optionsArray

option

参数说明类型可选值默认值
urlstring
rootstring
textstring / Function
valuestring / Function

Powered by 腾讯视频会员平台技术中心