用户信息 JSON表单
image.png

  1. {
  2.   "form": {
  3.     "labelCol": 6,
  4.     "wrapperCol": 12
  5.   },
  6.   "schema": {
  7.     "type": "object",
  8.     "properties": {
  9.       "name": {
  10.         "type": "string",
  11.         "title": "姓名",
  12.         "required": true,
  13.         "x-decorator": "FormItem",
  14.         "x-component": "Input",
  15.         "x-component-props": {
  16.           "hasClear": true,
  17.           "placeholder": "请输入",
  18.           "maxLength": 80,
  19.           "showCount": true
  20.         },
  21.         "name": "name",
  22.         "x-designable-id": "1janit4yors",
  23.         "x-index": 0,
  24.         "x-validator": [],
  25.         "x-decorator-props": {}
  26.       },
  27.       "sex": {
  28.         "type": "string | number",
  29.         "title": "性别",
  30.         "x-decorator": "FormItem",
  31.         "x-component": "Radio.Group",
  32.         "enum": [
  33.           {
  34.             "children": [],
  35.             "label": "男",
  36.             "value": 1
  37.           },
  38.           {
  39.             "children": [],
  40.             "label": "女",
  41.             "value": 2
  42.           },
  43.           {
  44.             "children": [],
  45.             "label": "保密",
  46.             "value": "3"
  47.           }
  48.         ],
  49.         "x-validator": [],
  50.         "x-component-props": {},
  51.         "x-decorator-props": {},
  52.         "name": "sex",
  53.         "required": true,
  54.         "default": 1,
  55.         "x-designable-id": "5ikay7pw1zh",
  56.         "x-index": 1
  57.       },
  58.       "hobby": {
  59.         "type": "string",
  60.         "title": "爱好",
  61.         "required": true,
  62.         "enum": [
  63.           {
  64.             "label": "吃饭",
  65.             "value": 1
  66.           },
  67.           {
  68.             "label": "睡觉",
  69.             "value": 2
  70.           }
  71.         ],
  72.         "x-decorator": "FormItem",
  73.         "x-component": "Select",
  74.         "x-component-props": {
  75.           "hasClear": true,
  76.           "placeholder": "请选择"
  77.         },
  78.         "name": "hobby",
  79.         "x-designable-id": "3gq5r9tfdcn",
  80.         "x-index": 2,
  81.         "x-validator": [],
  82.         "x-decorator-props": {}
  83.       },
  84.       "birthday": {
  85.         "type": "string",
  86.         "title": "生日",
  87.         "required": true,
  88.         "x-decorator": "FormItem",
  89.         "x-component": "DatePicker",
  90.         "x-component-props": {
  91.           "hasClear": true,
  92.           "placeholder": "请选择"
  93.         },
  94.         "name": "birthday",
  95.         "x-designable-id": "3x336k3uqdp",
  96.         "x-validator": [],
  97.         "x-decorator-props": {},
  98.         "x-index": 3
  99.       },
  100.       "phone": {
  101.         "type": "string",
  102.         "title": "手机号码",
  103.         "required": true,
  104.         "format": "phone",
  105.         "x-decorator": "FormItem",
  106.         "x-component": "Input",
  107.         "x-component-props": {
  108.           "trim": true,
  109.           "hasClear": true,
  110.           "placeholder": "请输入",
  111.           "maxLength": 11,
  112.           "showLimitHint": true,
  113.           "showCount": true
  114.         },
  115.         "x-reactions": {
  116.           "dependencies": [
  117.             "catId"
  118.           ],
  119.           "fulfill": {
  120.             "state": {
  121.               "visible": "{{$deps[0] === 123}}",
  122.               "disabled": "{{$deps[0] === 1234}}",
  123.               "required": "{{$deps[0] === 12345}}"
  124.             }
  125.           }
  126.         },
  127.         "name": "phone",
  128.         "x-designable-id": "l48hv7geg21",
  129.         "x-validator": [],
  130.         "x-decorator-props": {},
  131.         "x-index": 4
  132.       },
  133.       "description": {
  134.         "type": "string",
  135.         "title": "自我介绍",
  136.         "x-decorator": "FormItem",
  137.         "x-component": "Input.TextArea",
  138.         "x-component-props": {
  139.           "placeholder": ">=50字",
  140.           "row": 4,
  141.           "maxLength": 200,
  142.           "showLimitHint": true,
  143.           "showCount": true
  144.         },
  145.         "x-validator": {
  146.           "message": "请输入价格",
  147.           "required": true
  148.         },
  149.         "name": "description",
  150.         "x-designable-id": "upd51z6u3x0",
  151.         "x-decorator-props": {},
  152.         "x-index": 5
  153.       }
  154.     },
  155.     "x-designable-id": "t0lj5vhgrsg"
  156.   }
  157. }

formily 默认表单

formily 常用的表单及属性
image.png

  1. {
  2.   "form": {},
  3.   "schema": {
  4.     "type": "object",
  5.     "properties": {
  6.       "n9i1yr2cthp": {
  7.         "type": "void",
  8.         "x-component": "Card",
  9.         "x-component-props": {
  10.           "title": "Card 默认表单"
  11.         },
  12.         "x-designable-id": "n9i1yr2cthp",
  13.         "properties": {
  14.           "input": {
  15.             "type": "object",
  16.             "x-validator": [],
  17.             "name": "input",
  18.             "x-designable-id": "nmmz89ku2jd",
  19.             "x-index": 17
  20.           },
  21.           "textarea": {
  22.             "type": "string",
  23.             "title": "TextArea",
  24.             "x-decorator": "FormItem",
  25.             "x-component": "Input.TextArea",
  26.             "x-validator": [],
  27.             "x-component-props": {},
  28.             "x-decorator-props": {},
  29.             "name": "textarea",
  30.             "x-designable-id": "vf36t6tb4qp",
  31.             "x-index": 1
  32.           },
  33.           "password": {
  34.             "title": "Password",
  35.             "x-decorator": "FormItem",
  36.             "x-component": "Password",
  37.             "x-validator": [],
  38.             "x-component-props": {},
  39.             "x-decorator-props": {},
  40.             "name": "password",
  41.             "x-designable-id": "hoq1y5gw7uw",
  42.             "x-index": 2
  43.           },
  44.           "numberPicker": {
  45.             "type": "number",
  46.             "title": "NumberPicker",
  47.             "x-decorator": "FormItem",
  48.             "x-component": "NumberPicker",
  49.             "x-validator": [],
  50.             "x-component-props": {},
  51.             "x-decorator-props": {},
  52.             "name": "numberPicker",
  53.             "x-designable-id": "qit4hug5zkv",
  54.             "x-index": 3
  55.           },
  56.           "rate": {
  57.             "type": "number",
  58.             "title": "Rate",
  59.             "x-decorator": "FormItem",
  60.             "x-component": "Rate",
  61.             "x-validator": [],
  62.             "x-component-props": {},
  63.             "x-decorator-props": {},
  64.             "name": "rate",
  65.             "x-designable-id": "8amprw9q370",
  66.             "x-index": 4
  67.           },
  68.           "slider": {
  69.             "type": "number",
  70.             "title": "Slider",
  71.             "x-decorator": "FormItem",
  72.             "x-component": "Slider",
  73.             "x-validator": [],
  74.             "x-component-props": {},
  75.             "x-decorator-props": {},
  76.             "name": "slider",
  77.             "x-designable-id": "n44up6gef7y",
  78.             "x-index": 5
  79.           },
  80.           "select": {
  81.             "title": "Select",
  82.             "x-decorator": "FormItem",
  83.             "x-component": "Select",
  84.             "x-validator": [],
  85.             "x-component-props": {},
  86.             "x-decorator-props": {},
  87.             "name": "select",
  88.             "x-designable-id": "9j1kldh9xia",
  89.             "x-index": 6
  90.           },
  91.           "treeSelect": {
  92.             "title": "TreeSelect",
  93.             "x-decorator": "FormItem",
  94.             "x-component": "TreeSelect",
  95.             "x-validator": [],
  96.             "x-component-props": {},
  97.             "x-decorator-props": {},
  98.             "name": "treeSelect",
  99.             "x-designable-id": "0wieiuiboul",
  100.             "x-index": 7
  101.           },
  102.           "cascader": {
  103.             "title": "Cascader",
  104.             "x-decorator": "FormItem",
  105.             "x-component": "Cascader",
  106.             "x-validator": [],
  107.             "x-component-props": {},
  108.             "x-decorator-props": {},
  109.             "name": "cascader",
  110.             "x-designable-id": "2zoy0fpy86z",
  111.             "x-index": 8
  112.           },
  113.           "dateRange": {
  114.             "type": "string[]",
  115.             "title": "DateRangePicker",
  116.             "x-decorator": "FormItem",
  117.             "x-component": "DatePicker.RangePicker",
  118.             "x-validator": [],
  119.             "x-component-props": {},
  120.             "x-decorator-props": {},
  121.             "name": "dateRange",
  122.             "x-designable-id": "bs7izjqqvyx",
  123.             "x-index": 9
  124.           },
  125.           "datePicker": {
  126.             "type": "string",
  127.             "title": "DatePicker",
  128.             "x-decorator": "FormItem",
  129.             "x-component": "DatePicker",
  130.             "x-validator": [],
  131.             "x-component-props": {},
  132.             "x-decorator-props": {},
  133.             "name": "datePicker",
  134.             "x-designable-id": "1mjadpk1sgm",
  135.             "x-index": 10
  136.           },
  137.           "timePicker": {
  138.             "type": "string",
  139.             "title": "TimePicker",
  140.             "x-decorator": "FormItem",
  141.             "x-component": "TimePicker",
  142.             "x-validator": [],
  143.             "x-component-props": {},
  144.             "x-decorator-props": {},
  145.             "name": "timePicker",
  146.             "x-designable-id": "h31a9tsg32r",
  147.             "x-index": 11
  148.           },
  149.           "timeRange": {
  150.             "type": "string[]",
  151.             "title": "TimeRangePicker",
  152.             "x-decorator": "FormItem",
  153.             "x-component": "TimePicker.RangePicker",
  154.             "x-validator": [],
  155.             "x-component-props": {},
  156.             "x-decorator-props": {},
  157.             "name": "timeRange",
  158.             "x-designable-id": "mbalmkxbd9e",
  159.             "x-index": 12
  160.           },
  161.           "upload": {
  162.             "type": "Array<object>",
  163.             "title": "Drag Upload",
  164.             "x-decorator": "FormItem",
  165.             "x-component": "Upload.Dragger",
  166.             "x-component-props": {
  167.               "textContent": "Click or drag file to this area to upload"
  168.             },
  169.             "x-validator": [],
  170.             "x-decorator-props": {},
  171.             "name": "upload",
  172.             "x-designable-id": "du33hhvxn0l",
  173.             "x-index": 18
  174.           },
  175.           "radio": {
  176.             "type": "string | number",
  177.             "title": "Radio Group",
  178.             "x-decorator": "FormItem",
  179.             "x-component": "Radio.Group",
  180.             "enum": [
  181.               {
  182.                 "label": "选项1",
  183.                 "value": 1
  184.               },
  185.               {
  186.                 "label": "选项2",
  187.                 "value": 2
  188.               }
  189.             ],
  190.             "x-validator": [],
  191.             "x-component-props": {},
  192.             "x-decorator-props": {},
  193.             "name": "radio",
  194.             "x-designable-id": "2hqwhjmdve7",
  195.             "x-index": 14
  196.           },
  197.           "checkbox": {
  198.             "type": "Array<string | number>",
  199.             "title": "Checkbox Group",
  200.             "x-decorator": "FormItem",
  201.             "x-component": "Checkbox.Group",
  202.             "enum": [
  203.               {
  204.                 "label": "选项1",
  205.                 "value": 1
  206.               },
  207.               {
  208.                 "label": "选项2",
  209.                 "value": 2
  210.               }
  211.             ],
  212.             "x-validator": [],
  213.             "x-decorator-props": {},
  214.             "name": "checkbox",
  215.             "x-designable-id": "z15k9infa7d",
  216.             "x-index": 15
  217.           },
  218.           "switch": {
  219.             "type": "boolean",
  220.             "title": "Switch",
  221.             "x-decorator": "FormItem",
  222.             "x-component": "Switch",
  223.             "x-validator": [],
  224.             "x-component-props": {},
  225.             "x-decorator-props": {},
  226.             "name": "switch",
  227.             "x-designable-id": "gbscfwpc3tb",
  228.             "x-index": 16
  229.           },
  230.           "transer": {
  231.             "title": "Transfer",
  232.             "x-decorator": "FormItem",
  233.             "x-component": "Transfer",
  234.             "x-validator": [],
  235.             "x-component-props": {},
  236.             "x-decorator-props": {},
  237.             "name": "transer",
  238.             "x-designable-id": "quqj3lc1v3a",
  239.             "x-index": 19
  240.           }
  241.         },
  242.         "x-index": 0
  243.       }
  244.     },
  245.     "x-designable-id": "95lf4ez1302"
  246.   }
  247. }