单页面渲染表单_JSON数据渲染_后端配置表单
2024-11-21 12:45:12
为满足后端数据库配置表单，前端利用单页面框架vue、react、angular渲染表单出来正确展示，实现选择项联动、抽屉复用等功能。
2636
最近有配置化表单的需求，但是基于react框架，类似于数据驱动的框架都不好做数据渲染表单。但是在网上看到有类似结构，使用下来觉得很方便，就推荐给大家
话不多说，直入主题：
[
{
type: "radio",
title: "中午吃面",
field: "supplyType",
value: "",
children: [],
control: [
{
handle: (val) => {
return val === "1";
},
rule: [
{
type: "radio",
title: "面条品类",
field: "agentLevel",
value: "",
props: {
disabled: false,
},
children: [],
control: [],
validate: [],
options: [
{
text: "重庆小面",
value: "重庆小面",
},
{
text: "油泼面",
value: "油泼面",
},
{
text: "热干面",
value: "热干面",
},
],
col: 24,
},
],
},
],
validate: [],
options: [
{
text: "是",
value: "1",
},
{
text: "否",
value: "0",
},
],
col: 24,
},
{
type: "checkbox",
title: "火锅菜品",
field: "pickUpWay",
value: "",
children: [],
control: [],
validate: [],
options: [
{
text: "肥牛",
value: "肥牛",
},
{
text: "毛肚",
value: "毛肚",
},
{
text: "鹌鹑蛋",
value: "鹌鹑蛋",
},
],
col: 24,
},
{
type: "cascader",
title: "吃饭地址",
field: "brandType",
value: "",
props: {
multiple: true,
fieldNames: { label: "dictName", value: "code", children: "childList" },
style: { minWidth: 240 },
placeholder: "吃饭地址",
},
children: [],
control: [],
validate: [],
options: [
{
code: "14E01",
childList: [
{
code: "14E0101",
childList: null,
dictName: "北碚区",
dictKey: "two_electric",
ordinal: 0,
status: 1,
},
{
code: "14E0102",
childList: null,
dictName: "江北区",
dictKey: "three_electric",
ordinal: 0,
status: 1,
},
{
code: "14E0103",
childList: null,
dictName: "渝北区",
dictKey: "four_electric",
ordinal: 0,
status: 1,
},
{
code: "14E0104",
childList: null,
dictName: "九龙坡区",
dictKey: "two_engine",
ordinal: 0,
status: 1,
},
{
code: "14E0105",
childList: null,
dictName: "沙坪坝区",
dictKey: "three_engine",
ordinal: 0,
status: 1,
},
],
dictName: "重庆市",
dictKey: "light_car",
ordinal: 0,
status: 1,
},
{
code: "14E02",
childList: [
{
code: "14E0201",
childList: null,
dictName: "四川省",
dictKey: "test_01",
ordinal: 0,
status: 1,
},
],
dictName: "成都市",
dictKey: "test",
ordinal: 0,
status: 1,
},
],
col: 24,
},
{
type: "input",
title: "消费",
field: "yearMoney",
value: "",
props: {
suffix: "万元",
},
children: [],
control: [],
validate: [],
options: [],
col: 24,
},
{
type: "between",
title: "人均范围",
fieldMin: "betweenmin",
field: "between",
fieldMax: "betweenmax",
value: "",
props: {},
children: [],
control: [],
validate: [],
options: [],
col: 24,
},
{
type: "select",
title: "测试下拉框",
field: "selectDemo",
value: "",
props: {},
children: [],
control: [],
validate: [],
options: [],
col: 24,
},
{
type: "radio",
title: "低龄配置政策",
field: "dlpzzc",
value: "",
props: {},
children: [],
control: [
{
handle: (val) => {
return val === "1";
},
rule: [
{
type: "between",
title: "",
fieldMin: "dlmin",
field: "dl",
fieldMax: "dlmax",
value: "",
props: {},
children: [],
control: [],
validate: [],
options: [],
col: 24,
},
],
},
],
validate: [],
options: [
{
text: "是",
value: "1",
},
{
text: "否",
value: "0",
},
],
col: 24,
},
{
type: "arrayChoose",
title: "年营业额",
field: "arrayChoose",
drawerTitle: "关联品牌",
value: "",
props: {},
children: [
{
type: "select",
title: "测试下拉框1",
field: "selectDemo",
value: "",
props: {
showSearch: true,
optionFilterProp: "children",
},
children: [],
control: [],
validate: [],
options: [],
col: 24,
},
{
type: "cascader",
title: "目的地",
field: "brandArr",
value: "",
props: {
multiple: true,
fieldNames: { label: "name", value: "name", children: "children" },
style: { minWidth: 240 },
placeholder: "目的地",
placement: "bottomRight",
showSearch: true,
optionFilterProp: "children",
},
children: [],
control: [],
validate: [],
options: [
{
name: "北京市",
code: "110000",
children: [
{
name: "市辖区",
code: "110100",
children: [{ name: "东城区", code: "110101", children: null }],
},
],
},
],
col: 24,
},
],
control: [],
validate: [],
options: [],
col: 24,
},
{
type: "arrayChoose",
title: "可选范围",
field: "xianzhong",
drawerTitle: "险种信息",
value: "",
props: {},
children: [
{
type: "select",
title: "可选范围",
field: "select1",
value: "",
props: {
showSearch: true,
optionFilterProp: "children",
},
children: [],
control: [],
validate: [],
options: [],
col: 24,
},
],
control: [],
validate: [],
options: [],
col: 24,
},
{
type: "radio",
title: "自付比例",
field: "zfbl",
value: "",
children: [],
control: [
{
handle: (val) => {
return val === "1";
},
rule: [
{
type: "radio",
title: "代理层级",
field: "agentLevel1",
value: "",
props: {
disabled: false,
},
children: [],
control: [],
validate: [],
options: [
{
text: "省代",
value: "省代",
},
{
text: "市代",
value: "市代",
},
{
text: "区代",
value: "区代",
},
{
text: "县代",
value: "县代",
},
],
col: 24,
},
],
},
{
handle: (val) => {
return val === "2";
},
rule: [
{
type: "radio",
title: "代理层级2",
field: "agentLevel2",
value: "",
props: {
disabled: false,
},
children: [],
control: [],
validate: [],
options: [
{
text: "省代",
value: "省代",
},
{
text: "市代",
value: "市代",
},
{
text: "区代",
value: "区代",
},
{
text: "县代",
value: "县代",
},
],
col: 24,
},
],
},
],
validate: [],
options: [
{
text: "比例",
value: "1",
},
{
text: "范围值",
value: "2",
},
],
col: 24,
},
{
type: "imgUpload",
title: "照片",
field: "imga",
value: "",
props: {
accept: "image/*",
maxLength: 10,
},
children: [],
control: [],
validate: [],
options: [],
col: 24,
},
];
类型：type ：
- radio 单选
- checkbox 多选
- cascader级联选择
- input 输入框
- Between 区间
- arrayChoose 数组选择
- ImgUpload 图片上传
- 表单label：title
- 字段名：field
- 默认值：value （暂无需求，保留字段）
- 子元素：children （仅在数组选择下有效）
- 被控数组：control
- 校验方式：validate
- 数据配置：options
- 布局raw：col
- 额外参数：props
