表单组件
基于arco-design封装的表单，结合日常使用，集合了以下组件：
checkbox（复选框）
color（颜色选择器）
color-range（渐变色选择器）
date（日期选择器，支持年、月、日）
editor（富文本编辑框）
input（文本输入框）
input-number（数字输入框）
radio（单选框）
select （下拉选择框）
span（表单分割提示）
switch（开关）
textarea（文本域）
time（时间选择框）
upload（上传组件）
cascader（级联选择组件）
treeSelect（树选择组件）
如果以上不满足需求的，可以通过slot插槽使用自定义组件。
同时提供了以下方法，用于表单快速构建：
formHelper方法，用于生成各类组件对象、校验表单等ruleHelper方法，用于生成校验类
如果以上方法不满足需求，可以自行定义符合arco-design表单项的对象。
基础用法
<template>
<div>
<arco-form ref="form" v-model="formData" :config="formConfig">
<template #s1>
<a-form-item label="插槽"> 这是自定义插槽 {{ formData }}</a-form-item>
</template>
</arco-form>
<a-button @click="testFn">提交</a-button>
</div>
</template>
<script setup lang="ts">
import { ArcoForm, formHelper, ruleHelper } from "@easyfe/admin-component";
import { Message } from "@arco-design/web-vue";
import { uploadFile } from "@/apis/common";
const form = ref();
const formData = ref({
key12: "https://cdn.v2ex.com/avatar/1b4e/0a2d/614153_xlarge.png?m=1681735508",
key1: "这是input组件value",
key8: "#000",
key5: [],
key6: "",
text: `这是一段介绍文字<font style='color:red;padding-left:10px;font-weight:bold'>支持HTML</font>`
});
const formConfig = computed(() => {
return [
formHelper.section("基础信息1"),
formHelper.span("介绍", "text"),
formHelper.slot("s1"),
formHelper.input("文本", "key1", {
maxLength: 20,
showWordLimit: true,
rules: [ruleHelper.require("必填", "blur")],
labelTips: `提示内容第一点`,
// inputTips: () => "tttt"
inputTips: () => h("div", "提示内容第二点")
// inputTips: `示文案这是示文案是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案`
}),
formHelper.color("颜色", "key8", {
defaultColor: "#f5511e"
}),
formHelper.checkbox(
"多选框",
"key2",
[
{
label: "label1",
value: 1
},
{ label: "label2", value: 2 }
],
{
rules: [
ruleHelper.require("必选", "blur"),
{
validator: (value: any, callback: any) => {
if (!value) {
callback("至少选择两个");
}
if (value.length < 2) {
callback("至少选择两个");
} else {
callback();
}
}
}
]
}
),
formHelper.picUpload("图片", "key12", {
inputTips: "推荐使用400*400的图片",
customRequest: uploadFile
}),
formHelper.radio(
"单选框",
"key3",
[
{ label: "label1", value: 1, disabled: true },
{ label: "label2", value: 2 }
],
{
type: "radio"
}
),
formHelper.inputNumber("数字输入框", "key4"),
formHelper.section("基础信息2"),
formHelper.select(
"下拉框",
"key5",
[
{ label: "label1", value: 1, disabled: true },
{ label: "label2", value: 2 }
],
{
rules: [ruleHelper.require("必选", "blur")]
}
),
formHelper.switch("切换", "key7"),
formHelper.rangePicker("日期", "key10", {
type: "date",
placeholder: ["开始时间1", "结束时间1"]
}),
formHelper.time("时间", "key11"),
formHelper.treeSelect("树形选择", "key9", [
{
title: "label1",
key: 1,
children: [
{
title: "label1-1",
key: 11
}
]
},
{
title: "label2",
key: 2
}
]),
formHelper.select(
"多选下拉框",
"key20",
[
{ label: "复选1", value: 1 },
{ label: "复选2", value: 2 }
],
{ multiple: true }
),
formHelper.editor("富文本", "key6", {
uploadProps: {
customRequest: uploadFile
}
})
];
});
function testFn() {
formHelper
.validate(form.value)
.then(() => {
Message.success("保存成功");
})
.catch((err) => {
console.log("error", err);
});
}
</script><template>
<div>
<arco-form ref="form" v-model="formData" :config="formConfig">
<template #s1>
<a-form-item label="插槽"> 这是自定义插槽 {{ formData }}</a-form-item>
</template>
</arco-form>
<a-button @click="testFn">提交</a-button>
</div>
</template>
<script setup lang="ts">
import { ArcoForm, formHelper, ruleHelper } from "@easyfe/admin-component";
import { Message } from "@arco-design/web-vue";
import { uploadFile } from "@/apis/common";
const form = ref();
const formData = ref({
key12: "https://cdn.v2ex.com/avatar/1b4e/0a2d/614153_xlarge.png?m=1681735508",
key1: "这是input组件value",
key8: "#000",
key5: [],
key6: "",
text: `这是一段介绍文字<font style='color:red;padding-left:10px;font-weight:bold'>支持HTML</font>`
});
const formConfig = computed(() => {
return [
formHelper.section("基础信息1"),
formHelper.span("介绍", "text"),
formHelper.slot("s1"),
formHelper.input("文本", "key1", {
maxLength: 20,
showWordLimit: true,
rules: [ruleHelper.require("必填", "blur")],
labelTips: `提示内容第一点`,
// inputTips: () => "tttt"
inputTips: () => h("div", "提示内容第二点")
// inputTips: `示文案这是示文案是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案`
}),
formHelper.color("颜色", "key8", {
defaultColor: "#f5511e"
}),
formHelper.checkbox(
"多选框",
"key2",
[
{
label: "label1",
value: 1
},
{ label: "label2", value: 2 }
],
{
rules: [
ruleHelper.require("必选", "blur"),
{
validator: (value: any, callback: any) => {
if (!value) {
callback("至少选择两个");
}
if (value.length < 2) {
callback("至少选择两个");
} else {
callback();
}
}
}
]
}
),
formHelper.picUpload("图片", "key12", {
inputTips: "推荐使用400*400的图片",
customRequest: uploadFile
}),
formHelper.radio(
"单选框",
"key3",
[
{ label: "label1", value: 1, disabled: true },
{ label: "label2", value: 2 }
],
{
type: "radio"
}
),
formHelper.inputNumber("数字输入框", "key4"),
formHelper.section("基础信息2"),
formHelper.select(
"下拉框",
"key5",
[
{ label: "label1", value: 1, disabled: true },
{ label: "label2", value: 2 }
],
{
rules: [ruleHelper.require("必选", "blur")]
}
),
formHelper.switch("切换", "key7"),
formHelper.rangePicker("日期", "key10", {
type: "date",
placeholder: ["开始时间1", "结束时间1"]
}),
formHelper.time("时间", "key11"),
formHelper.treeSelect("树形选择", "key9", [
{
title: "label1",
key: 1,
children: [
{
title: "label1-1",
key: 11
}
]
},
{
title: "label2",
key: 2
}
]),
formHelper.select(
"多选下拉框",
"key20",
[
{ label: "复选1", value: 1 },
{ label: "复选2", value: 2 }
],
{ multiple: true }
),
formHelper.editor("富文本", "key6", {
uploadProps: {
customRequest: uploadFile
}
})
];
});
function testFn() {
formHelper
.validate(form.value)
.then(() => {
Message.success("保存成功");
})
.catch((err) => {
console.log("error", err);
});
}
</script>属性
继承了原组件的全部 Props，点击查看。
新增了以下 props：
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必填 |
|---|---|---|---|---|---|
| config | 表单 item 配置 | Record<string, any>[] | - | [] | 是 |
| model-value (v-model) | 表单值 | Record<string, any> | - | {} | 是 |
| layout | 表单布局 | column,row | - | column | 否 |