1. 效果演示

动态切换组件显示
点此在线运行代码：https://jsbin.com/baduhex/edit?html,output
test123.gif

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事件中编写处理代码：

image.png

  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. }