Appearance
Appearance
对element-plus的表单进行增强
TIP
bc-form不是必须的,可以正常使用el-form
element-plus中虽然有required属性,但是由于默认行为是进行${prop} is required的组合,所以明明是一个很方便的属性,但是完全没有使用场景。因此重写了这个属性,默认进行${label || prop}是必填项的组合, 同时支持自定义内容。
<template>
<ElForm
ref="formRef"
:model="formData"
>
<bc-form-item
label="名称"
prop="name"
required
>
<bc-input v-model="formData.name" />
<bc-select
v-model="formData.name"
api="merchant"
/>
</bc-form-item>
</ElForm>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElForm } from 'element-plus'
const formData = ref({ name: '' })
const formRef = ref<InstanceType<typeof ElForm>>()
async function getFormData() {
await formRef.value?.validate()
return formData.value
}
defineExpose({ getFormData })
</script>
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| required | 是否必填 | boolean | - | false |