InputSelect

基础用法

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

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

const CurrencyList = [
  { dictLabel: 'CNY', dictKey: 'CNY' },
  { dictLabel: 'USD', dictKey: 'USD' },
  { dictLabel: 'EUR', dictKey: 'EUR' }
]

const formInfo = reactive({
  billAmount: '',
  currency: ''
})

const formConfig = computed(() => {
  return [
    {
      key: 'billAmount',
      label: '账单金额',
      type: 'input-select',
      model: 'billAmount',
      prop: 'billAmount',
      required: true,
      appendModel: 'currency',
      appendPlaceholder: '请选择币种',
      dictList: CurrencyList
    },
  ]
})
</script>

Props

属性	说明	类型	默认值
type	`input-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`
minLength	最小长度校验	`number`	-
maxLength	最大长度校验	`number`	-
min	原生属性，设置最小值	`number`	-
max	原生属性，设置最大值	`number`	-
regExp	自定义正则校验	`string`	-
regMsg	自定义正则校验错误信息	`string`	-
validator	自定义校验方法	`Function`	-
appendModel	后置筛选框model	`string`	-
appendProp	后置筛选框prop	`string`	-
appendPlaceholder	后置筛选框占位文本	`string`	-
prependModel	前置筛选框model	`string`	-
prependProp	前置筛选框prop	`string`	-
prependPlaceholder	前置筛选框占位文本	`string`	-
showErrorTooltip	是否展示错误提示	`boolean`	`true`
changeFun	当绑定值变化时触发的回调函数	`Function`	-
showFun	是否展示的判断函数，返回一个`boolean`值	`Function`	-

后置和前置输入框其它属性可参考Select

InputSelect ​

基础用法 ​

Props ​

InputSelect

基础用法

Props