Select

基础用法

<template>
  <ai-form ref="formEl" :model="formInfo" :formConfig="formConfig"></ai-form>
</template>

<script setup>
import { reactive, computed } from 'vue'

const roleOptions = [
  { dictKey: 2, dictLabel: '研发' },
  { dictKey: 3, dictLabel: '产品' },
  { dictKey: 4, dictLabel: '运营' }
]

const formInfo = reactive({
  role: '',
})

const formConfig = computed(() => {
  return [
    {
      key: 'role',
      label: '角色',
      type: 'select',
      model: 'role',
      prop: 'role',
      required: true,
      dictList: roleOptions
    },
  ]
})
</script>

Props

属性	说明	类型	默认值
type	`select`	`string`	-
key	配置列表唯一标识	`string`	-
label	标签文本	`string`	-
model	属性名，它可以是属性的路径（如`a.b.0`）也可以是一个方法，返回属性路径，该属性是必填的	`string`/`Function`	-
prop	一般和属性名保持一致，在使用了`validate`、`resetFields`的方法时，该属性是必填的	`string`/`Function`	-
width	宽度（1-24）	`number`	`12`
noneLabel	是否隐藏标签	`boolean`	`false`
placeholder	输入框占位文本	`string`	-
disabled	是否禁用	`boolean`/`Function`	`false`
size	输入框尺寸	`string`	-
required	是否必填	`boolean`	`false`
validator	自定义校验方法	`Function`	-
multiple	是否多选	`boolean`	`false`
dictList	选项的数据源	`array`	`[]`
dictKey	指定选项的值为选项对象的某个属性值	`string`	`dictKey`
dictLabel	指定节点标签为节点对象的某个属性值	`string`	`dictLabel`
clearable	是否可以清空选项	`boolean`	`true`
filterable	是否可筛选	`boolean`	`false`
teleported	弹层是否使用`teleport`	`boolean`	`true`
fakeValue	假数据，可用于只读回显	`string`	-
remote	其中的选项是否从服务器远程加载	`boolean`	`false`
remoteMethod	当输入值发生变化时触发的函数，它的参数就是当前的输入值	`Function`	-
showCheck	是否展示Check框	`boolean`	`false`
allowCreate	是否允许用户创建新条目	`boolean`	`false`
loadingText	从服务器加载数据时显示的文本	`string`	`Loading`
showAll	是否展示全部选项	`boolean`	`false`
isGroup	是否分组展示	`boolean`	`false`
showErrorTooltip	是否展示错误提示	`boolean`	`true`
changeFun	当绑定值变化时触发的回调函数	`Function`	-
showFun	是否展示的判断函数，返回一个`boolean`值	`Function`	-

Select ​

基础用法 ​

Props ​

Select

基础用法

Props