最近有配置化表单的需求,但是基于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 :