单页面渲染表单_JSON数据渲染_后端配置表单
为满足后端数据库配置表单,前端利用单页面框架vue、react、angular渲染表单出来正确展示,实现选择项联动、抽屉复用等功能。
单页面渲染表单_JSON数据渲染_后端配置表单-MakerLi

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