表单批量生成多个组件:多个复选框/单选框等
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内容粘贴到系统中即可生成多个组件
本文来自博客园,作者:羊孩,转载请注明原文链接:https://www.cnblogs.com/sheepboy/p/18922466

浙公网安备 33010602011771号