Form 是 crud 业务核心组件, 默认自动生成 placeholder . 半自动生成 基础 表单验证, 让细节滴水不漏.
基础使用
使用form构建表单元素. 使用 row 进行栅栏布局 默认占24栏. 默认情况下会自动为其生成 placeholder 也可手动指定。通过 model 对 data 内数据进行双向绑定
data: {
"label1": "",
"label2": "123",
"label3": ""
}
<template>
<div>
<Form :createOption="form" />
</div>
<p>data: {{ form.data }}</p>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const form = CreateForm({
form: [
{
type: "Input",
label: "label1",
model: "label1",
row: [12],
},
{
type: "Input",
label: "label2",
model: "label2",
row: [12],
},
{
type: "Input",
label: "label3",
model: "label3",
placeholder: "需要生成自定义placeholder",
},
],
data: ref({
label1: "",
label2: "123",
label3: "",
}),
labelWidth: 60,
});
</script>
显示代码
表单禁用
disabled 控制禁用整个表单, vDisabled 权重更高
<template>
<div>
<Form :createOption="form" />
</div>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const form = CreateForm({
disabled: true,
form: [
{
type: "Select",
label: "vDisabled",
model: "vDisabled",
dataSource: [
{
value: 0,
label: "false",
},
{
value: 1,
label: "true",
},
],
},
{
type: "Input",
label: "受控组件",
model: "model",
placeholder: "演示组件",
vDisabled({ data }) {
return false;
},
},
],
data: ref({
vDisabled: 0,
model: "",
}),
});
</script>
显示代码
vIf
vIf 控制当前元素是否渲染、与vue内 v-if 指令类似
<template>
<div>
<Form :createOption="form" />
</div>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const form = CreateForm({
form: [
{
type: "Select",
label: "vIf",
model: "vIf",
dataSource: [
{
value: 0,
label: "false",
},
{
value: 1,
label: "true",
},
],
},
{
type: "Input",
label: "受控组件",
model: "model",
vIf({ data }) {
return data.vIf === 1;
},
},
],
data: ref({
vIf: 1,
model: "",
}),
});
</script>
显示代码
vDisabled
vDisabled 控制当前元素是否禁用
<template>
<div>
<Form :createOption="form" />
</div>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const form = CreateForm({
form: [
{
type: "Select",
label: "vDisabled",
model: "vDisabled",
dataSource: [
{
value: 0,
label: "false",
},
{
value: 1,
label: "true",
},
],
},
{
type: "Input",
label: "受控组件",
model: "model",
placeholder: "演示组件",
vDisabled({ data }) {
return data.vDisabled === 1;
},
},
],
data: ref({
vDisabled: 0,
model: "",
}),
});
</script>
显示代码
渲染自定义组件
用 render 渲染自定义组件/元素.
<template>
<div>
<Form :createOption="form" />
</div>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const form = CreateForm({
form: [
{
align: "left",
render() {
return <el-button type="primary">left</el-button>;
},
},
{
align: "center",
render() {
return <el-button type="primary">center</el-button>;
},
},
{
align: "right",
render() {
return <el-button type="primary">right</el-button>;
},
},
],
data: ref({}),
});
</script>
显示代码
渲染自定义表单组件
用 renderFormItem 渲染自定义组件/元素 内部会生成 ElFormItem 容器来处理表单验证
<template>
<div>
<Form :createOption="form" />
</div>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const form = CreateForm({
form: [
{
label: "left",
model: "left",
renderFormItem() {
return <el-button type="primary">left</el-button>;
},
},
{
label: "center",
model: "center",
renderFormItem() {
return <el-button type="primary">center</el-button>;
},
},
{
label: "right",
model: "right",
renderFormItem() {
return <el-button type="primary">right</el-button>;
},
},
],
data: ref({
left: "",
center: "",
right: "",
}),
createRule(create) {
return {
left: create.required(),
center: create.required(),
right: create.required(),
};
},
});
</script>
显示代码
表单验证
通过 createRule 构建表单验证, 可使用 required 快速构建基础必选类型(内部能自动选取合适的trigger、错误提示语). create 支持链调用来组织表单验证. 也支持直接配置 async-validator
表单验证通过会立即回调 onSuccess 反之 onError
<template>
<div>
<Form ref="formRef" :createOption="form" />
</div>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const formRef = ref();
const form = CreateForm({
form: [
{
type: "Input",
label: "姓名",
model: "name",
row: [12],
},
{
type: "Input",
label: "电话",
model: "phone",
row: [12],
},
{
align: "center",
render() {
return (
<el-button
type="primary"
onClick={() => {
formRef.value.validate();
}}
>
validate
</el-button>
);
},
},
],
createRule(create, data) {
return {
name: create.required(),
phone: create.required().phone(),
};
},
onSuccess() {
alert("通过");
},
onError() {
alert("失败");
},
data: ref({
name: "",
phone: "",
}),
});
</script>
显示代码
分组
通过设置 children 可对表单元素进行分组
<template>
<div>
<Form :createOption="form" />
</div>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const form = CreateForm({
form: [
{
type: "Input",
label: "姓名",
model: "name",
},
{
children: [
{
type: "Input",
label: "年龄",
model: "age",
row: [12],
},
{
type: "Input",
label: "性别",
model: "sex",
row: [12],
},
],
},
],
data: ref({
name: "",
age: "",
sex: "",
}),
});
</script>
显示代码
动态渲染 - vFor
动态渲染表单元素, 也可使用 map 实现, vFor 内部是由 map 实现, 为了推导其类型在 map 加了一层 vFor
data: {
"array": [
{
"ip": ""
}
]
}
<template>
<div>
<Form :createOption="form" />
</div>
<p>data: {{ form.data }}</p>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const form = CreateForm({
form({ data, vFor }) {
return [
...vFor(data.array, (item, index) => {
return {
children: [
{
row: [18],
type: "Input",
label: "ip",
model: `array.${index}.ip`,
createRule(create, data) {
return create.required();
},
},
{
row: [4, 2],
render() {
return (
<el-button
type="primary"
onClick={() => {
data.array.push({
ip: "",
});
}}
>
+
</el-button>
);
},
},
],
};
}),
];
},
data: ref({
array: [
{
ip: "",
},
],
}),
labelWidth: 50,
});
</script>
显示代码
配置接口 - api
当配置 api 后表单在表单验证通过后直接调用接口, 此刻 onSuccess 未触发 当接口调用成功才会触发 onSuccess . 在接口调用前可使用 requestData 重新构造提交数据
<template>
<div>
<Form ref="formRef" :createOption="form" />
</div>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { CreateForm } from "fast-crud";
const formRef = ref();
const form = CreateForm({
api: "createUser",
form: [
{
type: "Input",
label: "姓名",
model: "name",
row: [24],
createRule(create, data) {
return create.required();
},
},
{
align: "center",
render() {
return (
<el-button
loading={form.loading.value}
type="primary"
onClick={() => {
formRef.value.validate();
}}
>
submit
</el-button>
);
},
},
],
requestData(data) {
return {
data: {
nickName: data.name,
...data,
},
};
},
onSuccess() {
alert("成功");
},
data: ref({
name: "",
}),
});
</script>
显示代码
| 属性 | 说明 | 类型 | 可选择 | 默认值 |
|---|
| form | 构建表单 | Function | array | - | - |
| disabled | 禁用 | Ref<boolean> | boolean | true、false | false |
| labelWidth | 表单labelWidth | number | number | 120 |
| api | 表单提交接口配置 | 指定key | - | - |
| customProps | ElForm属性入口 | object | - | - |
| loading | 表单loading | Ref<boolean> | - | false |
| requestData | 提交时payload | requestData?: (data: RefValue<T>, api: ApiType) => any | - | - |
| onChange | 表单任一元素值改变 | - | - | - |
| onSuccess | 表单验证通过、提交成功 | (done: () => void, data: RefValue<T>, requestData?: any) => void | - | - |
| onError | 表单验证失败、提交失败 | (done: () => void) => void | - | - |
| createRule | 构建表单验证 | - | - | - |
| 属性 | 说明 | 类型 | 可选择 | 默认值 |
|---|
| type | 组件类型 | - | - | - |
| label | 表单label | - | - | - |
| model | 绑定值 | - | - | - |
| row | 栅栏布局 | [number, number] | - | [24, 0] |
| align | render的对齐方式 | 'left' | 'center' | 'left' | - | 'left' |
| vIf | - | - | - | - |
| vDisabled | - | - | - | - |
| render | - | - | - | - |
| renderFormItem | - | - | - | - |
| labelWidth | - | - | - | - |
| placeholder | - | - | - | - |
| className | - | - | - | - |
| onChange | - | - | - | - |
| dataSource | - | - | - | - |
| customProps | - | - | - | - |
| defaultValue | - | - | - | - |
| createRule | - | - | - | - |