schema-form
一个基于 ant design vue 组件库的 schema 配置表单组件，能够颗粒化更新，性能优化
优点
最大程度保留了组件库的 API，能够快速上手，和 ant design vue 表单项互通
schema 说明
dataIndex?: string; 字段名称，唯一标识符，渲染表单项的 field
controlType: formControlType | string; 渲染表单项的表单组件名称、如果内部不存在的话会抛出错误
label?: string; formItem 的 label
formItemProps?: FormItemProps; formItem 的所有 props 对应 ant design vue 的 formItemProps 会自动注入
controlRenderPops?: any; 渲染表单项的 props
renderFormItem?: () => VNode | VNode[]; 当在 JSX 情况下可以自行定义渲染
hideInForm?: boolean; 在表单中是否显示
rowPorps?: RowProps; 当在 group 模式下时，可以通过 rowprops 进行随意组合，会自动在外层加入 row 包裹
colProps?: ColProps; 当在 group 模式下时，可以设置每一项的 col props
formListProps?: {
spaceProps?: SpaceProps; 外部 space 包裹
addButtonProps?: ButtonProps & { text?: string }; 添加按钮的 props
delButtonProps?: ButtonProps & { text?: string }; 删除按钮的 props
addButtonSlot?: string; 添加按钮 插槽
delButtonSlot?: string; 删除按钮 插槽
}; 当是 formList 时的渲染方式的参数
slot?: string; 表单项的插槽
controlType 内置表单项
Input
InputGroup
InputSearch
InputNumber
InputPassword
TextArea
AutoComplete
Radio
RadioGroup
Checkbox
CheckboxGroup
Select
Cascader
DatePicker
RangePicker
Mentions
Rate
Slider
Switch
TimePicker
TimeRangePicker
Transfer
TreeSelect
Upload
group
formList
使用示例
<script setup lang="ts">
import { reactive, ref } from "vue";
import { Input, Button, FormInstance, Upload } from "ant-design-vue";
import BaseForm from "./package/schemaForm/BaseForm.tsx";
import { schemaFormType } from "./package/schemaForm/types/form";
const formRef = ref<FormInstance>();
const columns: schemaFormType[] = [
{
dataIndex: "name1",
controlType: "Input",
formItemProps: {
label: "name1",
rules: [{ required: true, message: "请输入name1" }],
},
},
{
dataIndex: "name2",
controlType: "Input",
formItemProps: {
label: "name2",
rules: [{ required: true, message: "请输入name2" }],
},
},
{
dataIndex: "select1",
controlType: "Select",
formItemProps: {
label: "select1",
rules: [{ required: true, message: "请输入name2" }],
},
controlRenderPops: {
options: [
{ label: "测试1", value: "1" },
{ label: "测试2", value: "2" },
],
allowClear: true,
},
},
{
controlType: "group",
columns: [
{
dataIndex: "group1",
controlType: "Input",
formItemProps: {
label: "group1",
},
controlRenderPops: {
placeholder: "请输入group1",
},
colProps: {
span: 8,
},
},
{
controlType: "group",
columns: [
{
dataIndex: "group1-group1",
controlType: "Input",
formItemProps: {
label: "group1-group1",
},
colProps: {
span: 12,
},
},
{
dataIndex: "group1-group2",
controlType: "Input",
formItemProps: {
label: "group1-group2",
},
colProps: {
span: 11,
offset: 1,
},
},
],
colProps: {
span: 14,
offset: 2,
},
},
],
},
{
dataIndex: "formList",
controlType: "formList",
formListProps: {
addButtonProps: {
block: true,
text: "Add",
},
},
columns: [
{
dataIndex: "formList2",
controlType: "Input",
formItemProps: {
label: "formList2",
rules: [{ required: true, message: "请输入formList2" }],
},
},
{
dataIndex: "formList1",
controlType: "Input",
formItemProps: {
label: "formList1",
rules: [{ required: true, message: "请输入formList1" }],
},
},
],
},
{
dataIndex: "uploda",
controlType: "Upload",
formItemProps: {
label: "文件",
// rules: [{ required: true, message: "请上传文件" }],
},
slot: "uploadFile",
},
{
dataIndex: "transfer",
controlType: "Transfer",
label: "transfer",
controlRenderPops: {},
},
{
dataIndex: "radio",
controlType: "RadioGroup",
label: "radio",
controlRenderPops: {
options: [
{
label: "radio1",
value: 1,
},
{
label: "radio2",
value: 2,
},
{
label: "radio3",
value: 3,
disabled: true,
},
],
},
},
{
dataIndex: "checkbox",
controlType: "CheckboxGroup",
label: "checkbox",
controlRenderPops: {
options: [
{
label: "radio1",
value: 1,
},
{
label: "radio2",
value: 2,
},
{
label: "radio3",
value: 3,
disabled: true,
},
],
},
},
{
dataIndex: "treeSelect",
controlType: "TreeSelect",
label: "treeselect",
controlRenderPops: {
allowClear: true,
placeholder: "请输入",
treeData: [
{
label: "Node1",
value: "0-0",
children: [
{
label: "Child Node1",
value: "0-0-0",
},
],
},
{
label: "Node2",
value: "0-1",
children: [
{
label: "Child Node3",
value: "0-1-0",
disabled: true,
},
{
label: "Child Node4",
value: "0-1-1",
},
{
label: "Child Node5",
value: "0-1-2",
},
],
},
],
},
},
];
const modelForm = reactive({
name1: "name1",
name2: "name2",
name3: "name3",
formList: [
{
list1: "list1",
list2: "list2",
list3: [
{
list6: "list6",
},
],
},
],
});
const handleSubmit = () => {
formRef.value?.validate();
console.log(modelForm);
console.log(formRef.value?.getFieldsValue());
};
</script>
<template>
<div class="container">
<BaseForm :model="modelForm" :schemas="columns" ref="formRef">
<template #name3Slot="{ schema }">
<input
:disabled="modelForm.name2 === 'nanme2'"
v-bind="schema.controlRenderPops"
v-model:value="modelForm.name3"
/>
</template>
<template #uploadFile="{ schema }">
<Upload>
<button>点击文件上传</button>
</Upload>
</template>
</BaseForm>
<button @click="handleSubmit">提交</button>
</div>
</template>
<style lang="less" scoped>
.container {
width: 600px;
margin: 0 auto;
}
</style>示例渲染结果
