表单批量生成多个组件:多个复选框/单选框等

1.现在系统中设计一个组件,复制表单

2.根据脚本在浏览器控制台生成多个组件

a. 修改脚本内容,详看截图

b.在谷歌浏览器控制台粘贴脚本生成组件json: 生成的json直接显示在浏览器控制台

示例:生成240个复选框

const fullData = {
  "widgetList": []
};

for (let i = 1; i <= 240; i++) {
  fullData.widgetList.push({
    "type": "checkbox",
    "icon": "checkbox-field",
    "formItemFlag": true,
    "options": {
      "name": `checkbox${i}`,
      "label": `${i}.`,
      "labelAlign": "",
      "defaultValue": [],
      "columnWidth": "200px",
      "size": "",
      "displayStyle": "block",
      "buttonStyle": false,
      "border": false,
      "labelWidth": null,
      "labelHidden": false,
      "disabled": false,
      "hidden": false,
      "optionItems": [
        {"label": "无法完成", "value": "0"},
        {"label": "从不(或几乎从不),在需要时", "value": "1"},
        {"label": "有时,在需要时", "value": "2"},
        {"value": "3", "label": "总是(或几乎总是),在需要时"},
        {"value": "4", "label": "仅在猜测时勾选"}
      ],
      "required": false,
      "requiredHint": "",
      "validation": "",
      "validationHint": "",
      "customClass": [],
      "labelIconClass": null,
      "labelIconPosition": "rear",
      "labelTooltip": null,
      "onCreated": "",
      "onMounted": "",
      "onChange": "",
      "onValidate": ""
    },
    "id": `checkbox748251749456374509_${i}`
  });
}

// 在浏览器控制台输出完整JSON
console.log(JSON.stringify(fullData, null, 2));

// 在Node.js环境中输出完整JSON
// console.log(JSON.stringify(fullData));

2.在生成的组件列表后面添加表单公共部分(注意:在组件列表后面添加英文逗号)

,
    "formConfig": {
        "modelName": "formData",
        "refName": "vForm",
        "rulesName": "rules",
        "labelWidth": 80,
        "labelPosition": "top",
        "size": "",
        "labelAlign": "label-left-align",
        "cssCode": "",
        "customClass": "",
        "functions": "",
        "layoutType": "PC",
        "onFormCreated": "",
        "onFormMounted": "",
        "onFormDataChange": ""
    }

如下图:框着的表单共有部分,在组件列表数组的后面加英文逗号

 3.将完整的表单json内容粘贴到系统中即可生成多个组件

 

posted @ 2025-06-10 17:00  羊孩  阅读(11)  评论(0)    收藏  举报
返回顶端