一、第一个例子

1. 效果演示

一个简单的人员信息登记表：

点此在线运行代码：

EasyForm应用示例 - 图1

2. 在线体验

表单JSON如下，复制JSON，在表单设计器（点此进入）中选择“导入JSON”即可看到效果：

  1. {
  2.   "widgetList": [
  3.     {
  4.       "type": "grid",
  5.       "category": "container",
  6.       "icon": "grid",
  7.       "cols": [
  8.         {
  9.           "type": "grid-col",
  10.           "category": "container",
  11.           "icon": "grid-col",
  12.           "internal": true,
  13.           "widgetList": [
  14.             {
  15.               "type": "static-text",
  16.               "icon": "static-text",
  17.               "formItemFlag": false,
  18.               "options": {
  19.                 "name": "static-text20799",
  20.                 "columnWidth": "200px",
  21.                 "hidden": false,
  22.                 "textContent": "人员登记表",
  23.                 "customClass": [],
  24.                 "onCreated": "",
  25.                 "onMounted": "",
  26.                 "label": "static-text"
  27.               },
  28.               "displayName": "静态文字",
  29.               "id": "static-text20799"
  30.             }
  31.           ],
  32.           "options": {
  33.             "name": "gridCol96077",
  34.             "hidden": false,
  35.             "span": 12,
  36.             "customClass": []
  37.           },
  38.           "id": "grid-col-96077"
  39.         }
  40.       ],
  41.       "options": {
  42.         "name": "grid64343",
  43.         "hidden": false,
  44.         "gutter": 12,
  45.         "customClass": []
  46.       },
  47.       "displayName": "栅格",
  48.       "id": "grid64343"
  49.     },
  50.     {
  51.       "type": "grid",
  52.       "category": "container",
  53.       "icon": "grid",
  54.       "cols": [
  55.         {
  56.           "type": "grid-col",
  57.           "category": "container",
  58.           "icon": "grid-col",
  59.           "internal": true,
  60.           "widgetList": [
  61.             {
  62.               "type": "input",
  63.               "icon": "text-field",
  64.               "formItemFlag": true,
  65.               "options": {
  66.                 "name": "input97458",
  67.                 "label": "姓名",
  68.                 "labelAlign": "",
  69.                 "type": "text",
  70.                 "defaultValue": "",
  71.                 "placeholder": "",
  72.                 "columnWidth": "200px",
  73.                 "size": "",
  74.                 "labelWidth": null,
  75.                 "labelHidden": false,
  76.                 "readonly": false,
  77.                 "disabled": false,
  78.                 "hidden": false,
  79.                 "clearable": true,
  80.                 "showPassword": false,
  81.                 "required": true,
  82.                 "validation": "",
  83.                 "validationHint": "",
  84.                 "customClass": [],
  85.                 "labelIconClass": null,
  86.                 "labelIconPosition": "rear",
  87.                 "labelTooltip": null,
  88.                 "minLength": null,
  89.                 "maxLength": null,
  90.                 "showWordLimit": false,
  91.                 "prefixIcon": "",
  92.                 "suffixIcon": "",
  93.                 "appendButton": false,
  94.                 "buttonDisabled": false,
  95.                 "buttonIcon": "el-icon-search",
  96.                 "onCreated": "",
  97.                 "onMounted": "",
  98.                 "onChange": "",
  99.                 "onFocus": "",
  100.                 "onBlur": "",
  101.                 "onValidate": ""
  102.               },
  103.               "displayName": "单行输入",
  104.               "id": "input97458"
  105.             }
  106.           ],
  107.           "options": {
  108.             "name": "gridCol66750",
  109.             "hidden": false,
  110.             "span": 12
  111.           },
  112.           "id": "grid-col-66750"
  113.         },
  114.         {
  115.           "type": "grid-col",
  116.           "category": "container",
  117.           "icon": "grid-col",
  118.           "internal": true,
  119.           "widgetList": [
  120.             {
  121.               "type": "radio",
  122.               "icon": "radio-field",
  123.               "formItemFlag": true,
  124.               "options": {
  125.                 "name": "radio61394",
  126.                 "label": "性别",
  127.                 "labelAlign": "",
  128.                 "defaultValue": 3,
  129.                 "columnWidth": "200px",
  130.                 "size": "",
  131.                 "displayStyle": "inline",
  132.                 "labelWidth": null,
  133.                 "labelHidden": false,
  134.                 "disabled": false,
  135.                 "hidden": false,
  136.                 "optionItems": [
  137.                   {
  138.                     "label": "女士",
  139.                     "value": 1
  140.                   },
  141.                   {
  142.                     "label": "先生",
  143.                     "value": 2
  144.                   },
  145.                   {
  146.                     "label": "无可奉告",
  147.                     "value": 3
  148.                   }
  149.                 ],
  150.                 "required": false,
  151.                 "validation": "",
  152.                 "validationHint": "",
  153.                 "customClass": [],
  154.                 "labelIconClass": null,
  155.                 "labelIconPosition": "rear",
  156.                 "labelTooltip": null,
  157.                 "onCreated": "",
  158.                 "onMounted": "",
  159.                 "onChange": "",
  160.                 "onValidate": ""
  161.               },
  162.               "displayName": "单选项",
  163.               "id": "radio61394"
  164.             }
  165.           ],
  166.           "options": {
  167.             "name": "gridCol16505",
  168.             "hidden": false,
  169.             "span": 12
  170.           },
  171.           "id": "grid-col-16505"
  172.         }
  173.       ],
  174.       "options": {
  175.         "name": "grid88004",
  176.         "hidden": false,
  177.         "gutter": 12,
  178.         "customClass": []
  179.       },
  180.       "displayName": "栅格",
  181.       "id": "grid88004"
  182.     },
  183.     {
  184.       "type": "grid",
  185.       "category": "container",
  186.       "icon": "grid",
  187.       "cols": [
  188.         {
  189.           "type": "grid-col",
  190.           "category": "container",
  191.           "icon": "grid-col",
  192.           "internal": true,
  193.           "widgetList": [
  194.             {
  195.               "type": "number",
  196.               "icon": "number-field",
  197.               "formItemFlag": true,
  198.               "options": {
  199.                 "name": "number106358",
  200.                 "label": "年龄",
  201.                 "labelAlign": "",
  202.                 "defaultValue": "18",
  203.                 "placeholder": "",
  204.                 "columnWidth": "200px",
  205.                 "size": "",
  206.                 "labelWidth": null,
  207.                 "labelHidden": false,
  208.                 "disabled": false,
  209.                 "hidden": false,
  210.                 "required": true,
  211.                 "validation": "",
  212.                 "validationHint": "",
  213.                 "customClass": [],
  214.                 "labelIconClass": "el-icon-question",
  215.                 "labelIconPosition": "rear",
  216.                 "labelTooltip": "年龄大于18岁的成年人方可登记",
  217.                 "min": 0,
  218.                 "max": 100,
  219.                 "precision": 0,
  220.                 "step": 1,
  221.                 "controlsPosition": "right",
  222.                 "onCreated": "",
  223.                 "onMounted": "",
  224.                 "onChange": "",
  225.                 "onFocus": "",
  226.                 "onBlur": "",
  227.                 "onValidate": ""
  228.               },
  229.               "displayName": "计数器",
  230.               "id": "number106358"
  231.             }
  232.           ],
  233.           "options": {
  234.             "name": "gridCol101163",
  235.             "hidden": false,
  236.             "span": 12
  237.           },
  238.           "id": "grid-col-101163"
  239.         },
  240.         {
  241.           "type": "grid-col",
  242.           "category": "container",
  243.           "icon": "grid-col",
  244.           "internal": true,
  245.           "widgetList": [
  246.             {
  247.               "type": "select",
  248.               "icon": "select-field",
  249.               "formItemFlag": true,
  250.               "options": {
  251.                 "name": "select62173",
  252.                 "label": "教育程度",
  253.                 "labelAlign": "",
  254.                 "defaultValue": "",
  255.                 "placeholder": "",
  256.                 "columnWidth": "200px",
  257.                 "size": "",
  258.                 "labelWidth": null,
  259.                 "labelHidden": false,
  260.                 "disabled": false,
  261.                 "hidden": false,
  262.                 "clearable": true,
  263.                 "filterable": false,
  264.                 "allowCreate": false,
  265.                 "remote": false,
  266.                 "automaticDropdown": false,
  267.                 "multiple": false,
  268.                 "multipleLimit": 0,
  269.                 "optionItems": [
  270.                   {
  271.                     "value": "1",
  272.                     "label": "社会人"
  273.                   },
  274.                   {
  275.                     "value": "2",
  276.                     "label": "高中"
  277.                   },
  278.                   {
  279.                     "value": "3",
  280.                     "label": "大学"
  281.                   },
  282.                   {
  283.                     "value": "4",
  284.                     "label": "研究生"
  285.                   },
  286.                   {
  287.                     "value": "5",
  288.                     "label": "博士及以上"
  289.                   }
  290.                 ],
  291.                 "required": true,
  292.                 "validation": "",
  293.                 "validationHint": "",
  294.                 "customClass": [],
  295.                 "labelIconClass": null,
  296.                 "labelIconPosition": "rear",
  297.                 "labelTooltip": null,
  298.                 "onCreated": "",
  299.                 "onMounted": "",
  300.                 "onRemoteQuery": "",
  301.                 "onChange": "",
  302.                 "onFocus": "",
  303.                 "onBlur": "",
  304.                 "onValidate": ""
  305.               },
  306.               "displayName": "下拉选项",
  307.               "id": "select62173"
  308.             }
  309.           ],
  310.           "options": {
  311.             "name": "gridCol46272",
  312.             "hidden": false,
  313.             "span": 12,
  314.             "customClass": []
  315.           },
  316.           "id": "grid-col-46272"
  317.         }
  318.       ],
  319.       "options": {
  320.         "name": "grid75579",
  321.         "hidden": false,
  322.         "gutter": 12
  323.       },
  324.       "id": "grid75579"
  325.     }
  326.   ],
  327.   "formConfig": {
  328.     "labelWidth": 80,
  329.     "labelPosition": "left",
  330.     "size": "",
  331.     "labelAlign": "label-left-align",
  332.     "cssCode": "",
  333.     "customClass": "",
  334.     "functions": "",
  335.     "layoutType": "PC",
  336.     "onFormCreated": "",
  337.     "onFormMounted": "",
  338.     "onFormDataChange": "",
  339.     "onFormValidate": ""
  340.   }
  341. }

二、高级一点的例子——交互事件与API方法

1. 效果演示

动态切换组件显示

点此在线运行代码：https://jsbin.com/baduhex/edit?html,output

EasyForm应用示例 - 图2

2. 在线体验

表单JSON如下，复制以下JSON内容，在表单设计器（点此进入）中选择“导入JSON”即可看到效果：

  1. {
  2.   "widgetList": [
  3.     {
  4.       "type": "grid",
  5.       "category": "container",
  6.       "icon": "grid",
  7.       "cols": [
  8.         {
  9.           "type": "grid-col",
  10.           "category": "container",
  11.           "icon": "grid-col",
  12.           "internal": true,
  13.           "widgetList": [
  14.             {
  15.               "type": "radio",
  16.               "icon": "radio-field",
  17.               "formItemFlag": true,
  18.               "options": {
  19.                 "name": "drinkRadio",
  20.                 "label": "喜欢喝酒还是饮料？",
  21.                 "labelAlign": "",
  22.                 "defaultValue": null,
  23.                 "columnWidth": "200px",
  24.                 "size": "",
  25.                 "displayStyle": "inline",
  26.                 "labelWidth": null,
  27.                 "labelHidden": false,
  28.                 "disabled": false,
  29.                 "hidden": false,
  30.                 "optionItems": [
  31.                   {
  32.                     "label": "喝酒",
  33.                     "value": 1
  34.                   },
  35.                   {
  36.                     "label": "喝饮料",
  37.                     "value": 2
  38.                   }
  39.                 ],
  40.                 "required": false,
  41.                 "validation": "",
  42.                 "validationHint": "",
  43.                 "customClass": [],
  44.                 "labelIconClass": null,
  45.                 "labelIconPosition": "rear",
  46.                 "labelTooltip": null,
  47.                 "onCreated": "",
  48.                 "onMounted": "",
  49.                 "onChange": "var alcoholChkWidget = this.getWidgetRef('alcoholChk')\nvar drinkChkWidget = this.getWidgetRef('drinkChk')\n\nif (value === 1) {\n  alcoholChkWidget.setHidden(false)\n  drinkChkWidget.setHidden(true)\n} else {\n  alcoholChkWidget.setHidden(true)\n  drinkChkWidget.setHidden(false)\n}",
  50.                 "onValidate": ""
  51.               },
  52.               "displayName": "单选项",
  53.               "id": "radio98420"
  54.             }
  55.           ],
  56.           "options": {
  57.             "name": "gridCol89539",
  58.             "hidden": false,
  59.             "span": 24
  60.           },
  61.           "id": "grid-col-89539"
  62.         },
  63.         {
  64.           "type": "grid-col",
  65.           "category": "container",
  66.           "icon": "grid-col",
  67.           "internal": true,
  68.           "widgetList": [
  69.             {
  70.               "type": "checkbox",
  71.               "icon": "checkbox-field",
  72.               "formItemFlag": true,
  73.               "options": {
  74.                 "name": "alcoholChk",
  75.                 "label": "喝什么酒",
  76.                 "labelAlign": "",
  77.                 "defaultValue": [],
  78.                 "columnWidth": "200px",
  79.                 "size": "",
  80.                 "displayStyle": "inline",
  81.                 "labelWidth": null,
  82.                 "labelHidden": false,
  83.                 "readonly": false,
  84.                 "disabled": false,
  85.                 "hidden": true,
  86.                 "optionItems": [
  87.                   {
  88.                     "label": "茅台",
  89.                     "value": 1
  90.                   },
  91.                   {
  92.                     "label": "二锅头",
  93.                     "value": 2
  94.                   },
  95.                   {
  96.                     "label": "伏尔加",
  97.                     "value": 3
  98.                   }
  99.                 ],
  100.                 "required": false,
  101.                 "validation": "",
  102.                 "validationHint": "",
  103.                 "customClass": [],
  104.                 "labelIconClass": null,
  105.                 "labelIconPosition": "rear",
  106.                 "labelTooltip": null,
  107.                 "onCreated": "",
  108.                 "onMounted": "",
  109.                 "onChange": "",
  110.                 "onValidate": ""
  111.               },
  112.               "displayName": "多选项",
  113.               "id": "checkbox46135"
  114.             }
  115.           ],
  116.           "options": {
  117.             "name": "gridCol76644",
  118.             "hidden": false,
  119.             "span": 24,
  120.             "customClass": []
  121.           },
  122.           "id": "grid-col-76644"
  123.         },
  124.         {
  125.           "type": "grid-col",
  126.           "category": "container",
  127.           "icon": "grid-col",
  128.           "internal": true,
  129.           "widgetList": [
  130.             {
  131.               "type": "checkbox",
  132.               "icon": "checkbox-field",
  133.               "formItemFlag": true,
  134.               "options": {
  135.                 "name": "drinkChk",
  136.                 "label": "喝啥子饮料",
  137.                 "labelAlign": "",
  138.                 "defaultValue": [],
  139.                 "columnWidth": "200px",
  140.                 "size": "",
  141.                 "displayStyle": "inline",
  142.                 "labelWidth": null,
  143.                 "labelHidden": false,
  144.                 "readonly": false,
  145.                 "disabled": false,
  146.                 "hidden": true,
  147.                 "optionItems": [
  148.                   {
  149.                     "label": "肥宅水",
  150.                     "value": 1
  151.                   },
  152.                   {
  153.                     "label": "白花蛇草水",
  154.                     "value": 2
  155.                   },
  156.                   {
  157.                     "label": "农夫山泉有点田",
  158.                     "value": 3
  159.                   }
  160.                 ],
  161.                 "required": false,
  162.                 "validation": "",
  163.                 "validationHint": "",
  164.                 "customClass": "",
  165.                 "labelIconClass": null,
  166.                 "labelIconPosition": "rear",
  167.                 "labelTooltip": null,
  168.                 "onCreated": "",
  169.                 "onMounted": "",
  170.                 "onChange": "",
  171.                 "onValidate": ""
  172.               },
  173.               "displayName": "多选项",
  174.               "id": "checkbox48765"
  175.             }
  176.           ],
  177.           "options": {
  178.             "name": "gridCol17019",
  179.             "hidden": false,
  180.             "span": 24
  181.           },
  182.           "id": "grid-col-17019"
  183.         }
  184.       ],
  185.       "options": {
  186.         "name": "grid85701",
  187.         "hidden": false,
  188.         "gutter": 12,
  189.         "customClass": []
  190.       },
  191.       "displayName": "栅格",
  192.       "id": "grid85701"
  193.     }
  194.   ],
  195.   "formConfig": {
  196.     "labelWidth": 200,
  197.     "labelPosition": "left",
  198.     "size": "",
  199.     "labelAlign": "label-left-align",
  200.     "cssCode": "",
  201.     "customClass": "",
  202.     "functions": "",
  203.     "layoutType": "PC",
  204.     "onFormCreated": "",
  205.     "onFormMounted": "",
  206.     "onFormDataChange": "",
  207.     "onFormValidate": ""
  208.   }
  209. }

3. 实现思路解说

交互逻辑的实现方法：在drinkType组件的onChange事件中编写处理代码：

EasyForm应用示例 - 图3

  1. var alcoholChkWidget = this.getWidgetRef('alcoholChk')
  2. var drinkChkWidget = this.getWidgetRef('drinkChk')
  4. if (value === 1) {
  5.   alcoholChkWidget.setHidden(false)
  6.   drinkChkWidget.setHidden(true)
  7. } else {
  8.   alcoholChkWidget.setHidden(true)
  9.   drinkChkWidget.setHidden(false)
  10. }

三、更高级一点的例子——子表单和计算字段

1. 效果演示

子表单添加、删除行时，计算单行结果和累计结果：

点此在线运行代码：https://jsbin.com/wofozir/edit?html,output

EasyForm应用示例 - 图4

2. 在线体验

表单JSON如下，复制下列JSON，在表单设计器（点此进入）中选择“导入JSON”即可看到效果：

  1. {
  2.   "widgetList": [
  3.     {
  4.       "type": "grid",
  5.       "category": "container",
  6.       "icon": "grid",
  7.       "cols": [
  8.         {
  9.           "type": "grid-col",
  10.           "category": "container",
  11.           "icon": "grid-col",
  12.           "internal": true,
  13.           "widgetList": [
  14.             {
  15.               "type": "static-text",
  16.               "icon": "static-text",
  17.               "formItemFlag": false,
  18.               "options": {
  19.                 "name": "static-text55175",
  20.                 "columnWidth": "200px",
  21.                 "hidden": false,
  22.                 "textContent": "子表单、计算字段演示",
  23.                 "customClass": [],
  24.                 "onCreated": "",
  25.                 "onMounted": "",
  26.                 "label": "static-text"
  27.               },
  28.               "displayName": "静态文字",
  29.               "id": "static-text55175"
  30.             }
  31.           ],
  32.           "options": {
  33.             "name": "gridCol114213",
  34.             "hidden": false,
  35.             "span": 12
  36.           },
  37.           "id": "grid-col-114213"
  38.         },
  39.         {
  40.           "type": "grid-col",
  41.           "category": "container",
  42.           "icon": "grid-col",
  43.           "internal": true,
  44.           "widgetList": [],
  45.           "options": {
  46.             "name": "gridCol80092",
  47.             "hidden": false,
  48.             "span": 12
  49.           },
  50.           "id": "grid-col-80092"
  51.         }
  52.       ],
  53.       "options": {
  54.         "name": "grid115477",
  55.         "hidden": false,
  56.         "gutter": 12,
  57.         "customClass": []
  58.       },
  59.       "displayName": "栅格",
  60.       "id": "grid115477"
  61.     },
  62.     {
  63.       "type": "sub-form",
  64.       "category": "container",
  65.       "icon": "sub-form",
  66.       "widgetList": [
  67.         {
  68.           "type": "input",
  69.           "icon": "text-field",
  70.           "formItemFlag": true,
  71.           "options": {
  72.             "name": "pName",
  73.             "label": "产品名称",
  74.             "type": "text",
  75.             "defaultValue": "",
  76.             "placeholder": "",
  77.             "columnWidth": "150px",
  78.             "size": "",
  79.             "labelWidth": null,
  80.             "labelHidden": false,
  81.             "readonly": false,
  82.             "disabled": false,
  83.             "hidden": false,
  84.             "clearable": true,
  85.             "showPassword": false,
  86.             "required": false,
  87.             "validation": "",
  88.             "validationHint": "",
  89.             "customClass": [],
  90.             "labelIconClass": null,
  91.             "labelIconPosition": "rear",
  92.             "labelTooltip": null,
  93.             "minLength": null,
  94.             "maxLength": null,
  95.             "showWordLimit": false,
  96.             "prefixIcon": "",
  97.             "suffixIcon": "",
  98.             "appendButton": false,
  99.             "buttonDisabled": false,
  100.             "buttonIcon": "el-icon-search",
  101.             "onCreated": "",
  102.             "onMounted": "",
  103.             "onChange": "",
  104.             "onValidate": ""
  105.           },
  106.           "displayName": "Input",
  107.           "id": "input65393"
  108.         },
  109.         {
  110.           "type": "number",
  111.           "icon": "number-field",
  112.           "formItemFlag": true,
  113.           "options": {
  114.             "name": "pNum",
  115.             "label": "数量",
  116.             "defaultValue": "1",
  117.             "placeholder": "",
  118.             "columnWidth": "200px",
  119.             "size": "",
  120.             "labelWidth": null,
  121.             "labelHidden": false,
  122.             "readonly": false,
  123.             "disabled": false,
  124.             "hidden": false,
  125.             "required": false,
  126.             "validation": "",
  127.             "validationHint": "",
  128.             "customClass": [],
  129.             "labelIconClass": null,
  130.             "labelIconPosition": "rear",
  131.             "labelTooltip": null,
  132.             "min": 0,
  133.             "max": 100,
  134.             "precision": 0,
  135.             "step": 1,
  136.             "controlsPosition": "right",
  137.             "onCreated": "",
  138.             "onMounted": "",
  139.             "onChange": "recalcRowAmount(this, rowId)",
  140.             "onValidate": ""
  141.           },
  142.           "displayName": "Number",
  143.           "id": "number81340"
  144.         },
  145.         {
  146.           "type": "number",
  147.           "icon": "number-field",
  148.           "formItemFlag": true,
  149.           "options": {
  150.             "name": "pPrice",
  151.             "label": "单价",
  152.             "defaultValue": "100",
  153.             "placeholder": "",
  154.             "columnWidth": "200px",
  155.             "size": "",
  156.             "labelWidth": null,
  157.             "labelHidden": false,
  158.             "readonly": false,
  159.             "disabled": false,
  160.             "hidden": false,
  161.             "required": false,
  162.             "validation": "",
  163.             "validationHint": "",
  164.             "customClass": [],
  165.             "labelIconClass": null,
  166.             "labelIconPosition": "rear",
  167.             "labelTooltip": null,
  168.             "min": 0,
  169.             "max": 10000,
  170.             "precision": 2,
  171.             "step": 1,
  172.             "controlsPosition": "right",
  173.             "onCreated": "",
  174.             "onMounted": "",
  175.             "onChange": "recalcRowAmount(this, rowId)\n",
  176.             "onValidate": ""
  177.           },
  178.           "displayName": "Number",
  179.           "id": "number114595"
  180.         },
  181.         {
  182.           "type": "number",
  183.           "icon": "number-field",
  184.           "formItemFlag": true,
  185.           "options": {
  186.             "name": "pAmount",
  187.             "label": "小计金额",
  188.             "defaultValue": 0,
  189.             "placeholder": "",
  190.             "columnWidth": "200px",
  191.             "size": "",
  192.             "labelWidth": null,
  193.             "labelHidden": false,
  194.             "readonly": true,
  195.             "disabled": true,
  196.             "hidden": false,
  197.             "required": false,
  198.             "validation": "",
  199.             "validationHint": "",
  200.             "customClass": [],
  201.             "labelIconClass": null,
  202.             "labelIconPosition": "rear",
  203.             "labelTooltip": null,
  204.             "min": 0,
  205.             "max": 1000000,
  206.             "precision": 2,
  207.             "step": 1,
  208.             "controlsPosition": "right",
  209.             "onCreated": "",
  210.             "onMounted": "",
  211.             "onChange": "let taRef = this.getWidgetRef('totalAmount')\nrecalcSubFormTotal(subFormData, 'pAmount', taRef)\n",
  212.             "onValidate": ""
  213.           },
  214.           "displayName": "Number",
  215.           "id": "number35019"
  216.         }
  217.       ],
  218.       "options": {
  219.         "name": "sub-form7238",
  220.         "showBlankRow": true,
  221.         "showRowNumber": true,
  222.         "labelAlign": "label-center-align",
  223.         "hidden": false,
  224.         "customClass": [],
  225.         "onSubFormRowChange": "let taRef = this.getWidgetRef('totalAmount')\nrecalcSubFormTotal(subFormData, 'pAmount', taRef)\n",
  226.         "onSubFormRowDelete": "",
  227.         "onSubFormRowAdd": "",
  228.         "onSubFormRowInsert": ""
  229.       },
  230.       "displayName": "SubForm",
  231.       "id": "sub-form7238"
  232.     },
  233.     {
  234.       "type": "grid",
  235.       "category": "container",
  236.       "icon": "grid",
  237.       "cols": [
  238.         {
  239.           "type": "grid-col",
  240.           "category": "container",
  241.           "icon": "grid-col",
  242.           "internal": true,
  243.           "widgetList": [
  244.             {
  245.               "type": "input",
  246.               "icon": "text-field",
  247.               "formItemFlag": true,
  248.               "options": {
  249.                 "name": "totalAmount",
  250.                 "label": "总计金额",
  251.                 "type": "text",
  252.                 "defaultValue": "",
  253.                 "placeholder": "",
  254.                 "columnWidth": "200px",
  255.                 "size": "",
  256.                 "labelWidth": null,
  257.                 "labelHidden": false,
  258.                 "readonly": true,
  259.                 "disabled": true,
  260.                 "hidden": false,
  261.                 "clearable": true,
  262.                 "showPassword": false,
  263.                 "required": false,
  264.                 "validation": "",
  265.                 "validationHint": "",
  266.                 "customClass": [],
  267.                 "labelIconClass": null,
  268.                 "labelIconPosition": "rear",
  269.                 "labelTooltip": null,
  270.                 "minLength": null,
  271.                 "maxLength": null,
  272.                 "showWordLimit": false,
  273.                 "prefixIcon": "",
  274.                 "suffixIcon": "",
  275.                 "appendButton": false,
  276.                 "buttonDisabled": false,
  277.                 "buttonIcon": "el-icon-search",
  278.                 "onCreated": "",
  279.                 "onMounted": "",
  280.                 "onChange": "",
  281.                 "onValidate": ""
  282.               },
  283.               "displayName": "Input",
  284.               "id": "input55898"
  285.             }
  286.           ],
  287.           "options": {
  288.             "name": "gridCol33828",
  289.             "hidden": false,
  290.             "span": 12
  291.           },
  292.           "id": "grid-col-33828"
  293.         },
  294.         {
  295.           "type": "grid-col",
  296.           "category": "container",
  297.           "icon": "grid-col",
  298.           "internal": true,
  299.           "widgetList": [
  300.             {
  301.               "type": "input",
  302.               "icon": "text-field",
  303.               "formItemFlag": true,
  304.               "options": {
  305.                 "name": "totalCount",
  306.                 "label": "total count",
  307.                 "type": "text",
  308.                 "defaultValue": "",
  309.                 "placeholder": "",
  310.                 "columnWidth": "200px",
  311.                 "size": "",
  312.                 "labelWidth": null,
  313.                 "labelHidden": false,
  314.                 "readonly": true,
  315.                 "disabled": false,
  316.                 "hidden": true,
  317.                 "clearable": true,
  318.                 "showPassword": false,
  319.                 "required": false,
  320.                 "validation": "",
  321.                 "validationHint": "",
  322.                 "customClass": [],
  323.                 "labelIconClass": null,
  324.                 "labelIconPosition": "rear",
  325.                 "labelTooltip": null,
  326.                 "minLength": null,
  327.                 "maxLength": null,
  328.                 "showWordLimit": false,
  329.                 "prefixIcon": "",
  330.                 "suffixIcon": "",
  331.                 "appendButton": false,
  332.                 "buttonDisabled": false,
  333.                 "buttonIcon": "el-icon-search",
  334.                 "onCreated": "",
  335.                 "onMounted": "",
  336.                 "onChange": "",
  337.                 "onValidate": ""
  338.               },
  339.               "displayName": "Input",
  340.               "id": "input77431"
  341.             }
  342.           ],
  343.           "options": {
  344.             "name": "gridCol69043",
  345.             "hidden": false,
  346.             "span": 12,
  347.             "customClass": []
  348.           },
  349.           "id": "grid-col-69043"
  350.         }
  351.       ],
  352.       "options": {
  353.         "name": "grid55046",
  354.         "hidden": false,
  355.         "gutter": 12,
  356.         "customClass": []
  357.       },
  358.       "displayName": "Grid",
  359.       "id": "grid55046"
  360.     }
  361.   ],
  362.   "formConfig": {
  363.     "labelWidth": 80,
  364.     "labelPosition": "left",
  365.     "size": "",
  366.     "labelAlign": "label-left-align",
  367.     "cssCode": "",
  368.     "customClass": [],
  369.     "functions": "function myAlert(msg) {\n  alert(msg)\n}\n\nfunction recalcRowAmount(changeObj, rowId) {\n  let numR = changeObj.getWidgetRef('pNum' + '@row' + rowId)\n  let priceR = changeObj.getWidgetRef('pPrice' + '@row' + rowId)\n  let amountR = changeObj.getWidgetRef('pAmount' + '@row' + rowId)\n  let amountMoney = numR.getValue() * 1 * priceR.getValue()\n  amountR.setValue(amountMoney)\n}\n\nfunction recalcSubFormTotal(subFormData, rowFieldName, totalFieldRef) {\n  let tc = 0\n  if (!!subFormData && (subFormData.length > 0)) {\n    subFormData.forEach(function(row) {\n      tc += row[rowFieldName] * 1\n    })\n  }\n  totalFieldRef.setValue(tc)\n}\n",
  370.     "layoutType": "PC",
  371.     "onFormCreated": "",
  372.     "onFormMounted": "",
  373.     "onFormDataChange": "",
  374.     "onFormValidate": ""
  375.   }
  376. }

3. 实现思路解说

计算字段实现方法：

(1) 在表单全局函数中定义单行计算函数recalcRowAmount、累计计算函数recalcSubFormTotal；

EasyForm应用示例 - 图5

EasyForm应用示例 - 图6

（2）在数量、单价字段的onChange事件中调用recalcRowAmount进行单行计算；

（3）在小计金额字段的onChange事件中调用recalcSubFormTotal进行累计计算；

（4）为了在子表单删除、新增行后也能重新计算累计金额，需要在子表单的onSubFormRowChange事件中调用recalcSubFormTotal进行累计计算。注：子表单的onSubFormRowChange事件在新增行、插入行、删除行时被触发。

EasyForm应用示例 - 图7

（5）通过以上步骤，子表单的单行计算、累计计算已实现。

四、第四个例子——下拉组件选择联动

1. 效果演示

当地区选项改变后，安装地址的选项联动变化

EasyForm应用示例 - 图8

2. 在线体验

表单JSON如下，复制JSON，在表单设计器（点此进入）中选择“导入JSON”即可看到效果：

  1. {
  2.   "widgetList": [
  3.     {
  4.       "type": "select",
  5.       "icon": "select-field",
  6.       "formItemFlag": true,
  7.       "options": {
  8.         "name": "citySelect",
  9.         "label": "地区",
  10.         "labelAlign": "",
  11.         "defaultValue": "",
  12.         "placeholder": "",
  13.         "columnWidth": "200px",
  14.         "size": "",
  15.         "labelWidth": null,
  16.         "labelHidden": false,
  17.         "disabled": false,
  18.         "hidden": false,
  19.         "clearable": true,
  20.         "filterable": false,
  21.         "allowCreate": false,
  22.         "remote": false,
  23.         "automaticDropdown": false,
  24.         "multiple": false,
  25.         "multipleLimit": 0,
  26.         "optionItems": [],
  27.         "required": false,
  28.         "validation": "",
  29.         "validationHint": "",
  30.         "customClass": [],
  31.         "labelIconClass": null,
  32.         "labelIconPosition": "rear",
  33.         "labelTooltip": null,
  34.         "onCreated": "",
  35.         "onMounted": "",
  36.         "onRemoteQuery": "",
  37.         "onChange": "var addressAPI = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/getAddress?cityId='\nvar addressSelectR = this.getWidgetRef('addressSelect')\n\naxios.get(addressAPI + value).then(function(res) {\n  addressSelectR.loadOptions(res.data.data)\n  \n  //if (!value) {\n  //  addressSelectR.setValue(null)\n  //}\n}).catch(function(error) {\n  console.error(error)\n})\n\naddressSelectR.setValue(null)\n",
  38.         "onFocus": "",
  39.         "onBlur": "",
  40.         "onValidate": ""
  41.       },
  42.       "id": "select78413"
  43.     },
  44.     {
  45.       "type": "select",
  46.       "icon": "select-field",
  47.       "formItemFlag": true,
  48.       "options": {
  49.         "name": "addressSelect",
  50.         "label": "安装地址",
  51.         "labelAlign": "",
  52.         "defaultValue": "",
  53.         "placeholder": "",
  54.         "columnWidth": "200px",
  55.         "size": "",
  56.         "labelWidth": null,
  57.         "labelHidden": false,
  58.         "disabled": false,
  59.         "hidden": false,
  60.         "clearable": true,
  61.         "filterable": false,
  62.         "allowCreate": false,
  63.         "remote": false,
  64.         "automaticDropdown": false,
  65.         "multiple": false,
  66.         "multipleLimit": 0,
  67.         "optionItems": [],
  68.         "required": false,
  69.         "validation": "",
  70.         "validationHint": "",
  71.         "customClass": "",
  72.         "labelIconClass": null,
  73.         "labelIconPosition": "rear",
  74.         "labelTooltip": null,
  75.         "onCreated": "",
  76.         "onMounted": "",
  77.         "onRemoteQuery": "",
  78.         "onChange": "",
  79.         "onFocus": "",
  80.         "onBlur": "",
  81.         "onValidate": ""
  82.       },
  83.       "id": "select90599"
  84.     }
  85.   ],
  86.   "formConfig": {
  87.     "modelName": "formData",
  88.     "refName": "vForm",
  89.     "rulesName": "rules",
  90.     "labelWidth": 80,
  91.     "labelPosition": "left",
  92.     "size": "",
  93.     "labelAlign": "label-left-align",
  94.     "cssCode": "",
  95.     "customClass": "",
  96.     "functions": "",
  97.     "layoutType": "PC",
  98.     "onFormCreated": "",
  99.     "onFormMounted": "var citySelectR = this.getWidgetRef('citySelect')\n\naxios.get('https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/getCity').then(function(res) {\n  citySelectR.loadOptions(res.data.data)\n}).catch(function(error) {\n  console.error(error)\n})",
  100.     "onFormDataChange": ""
  101.   }
  102. }

3. 实现思路解说

（1）在表单的onFormMounted事件中加载地区选项，如下图所示：

EasyForm应用示例 - 图9

提示：也可在地区选择组件的onMounted事件中编写加载选项代码，效果一样。

（2）在地区选择组件的onChange事件中加载安装地组件的选项，并清空其对应的表单数据值，如下图所示：

EasyForm应用示例 - 图10

（3）点击表单设计器的预览按钮，即可测试选择联动效果。

同理可推，按照上述交互处理方式，可以实现三级、四级、五级等多级组件联动效果。