Arrayitems https://antd5.formilyjs.org/zh-CN/components/array-items

    image.png

    1. const schema = {
    2.   "type": "object",
    3.   "properties": {
    4.     "contacts": {
    5.       "type": "array",
    6.       "x-component": "ArrayItems",
    7.       "x-decorator": "FormItem",
    8.       "title": "联系人",
    9.       "items": {
    10.         "type": "object",
    11.         "properties": {
    12.           "space": {
    13.             "type": "void",
    14.             "x-component": "Space",
    15.             "properties": {
    16.               "sort": {
    17.                 "type": "void",
    18.                 "x-decorator": "FormItem",
    19.                 "x-component": "ArrayItems.SortHandle"
    20.               },
    21.               "name": {
    22.                 "type": "string",
    23.                 "title": "姓名",
    24.                 "enum": [
    25.                   {
    26.                     "label": "张飞",
    27.                     "value": 1
    28.                   },
    29.                   {
    30.                     "label": "刘秀",
    31.                     "value": 2
    32.                   }
    33.                 ],
    34.                 "x-decorator": "FormItem",
    35.                 "x-component": "Select",
    36.                 "x-component-props": {
    37.                   "style": {
    38.                     "width": 180
    39.                   }
    40.                 }
    41.               },
    42.               "phone": {
    43.                 "type": "string",
    44.                 "title": "手机号",
    45.                 "x-decorator": "FormItem",
    46.                 "x-component": "Input",
    47.                 "x-validator": "phone",
    48.                 "x-component-props": {
    49.                   "maxLength": 11,
    50.                   "showCount": true,
    51.                   "placeholder": "请输入手机号"
    52.                 },
    53.                 "x-decorator-props": {
    54.                   "style": { "flex": 1 }
    55.                 },
    56.                 "name": "phone",
    57.                 "required": true,
    58.                 "x-designable-id": "v0ojceniv88"
    59.               },
    60.               "remove": {
    61.                 "type": "void",
    62.                 "x-decorator": "FormItem",
    63.                 "x-component": "ArrayItems.Remove",
    64.                 "x-component-props": {
    65.                   "style": { "width": 40 },
    66.                   "className": "text-center"
    67.                 }
    68.               }
    69.             }
    70.           }
    71.         }
    72.       },
    73.       "properties": {
    74.         "add": {
    75.           "type": "void",
    76.           "title": "添加条目",
    77.           "x-component": "ArrayItems.Addition",
    78.           "x-component-props": {
    79.             "type": "primary",
    80.             "ghost": true,
    81.           }
    82.         }
    83.       }
    84.     }
    85.   },
    86.   "x-designable-id": "4hzm4xnqmgl"
    87. }