1. 效果演示

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

cascade_demo2.gif

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事件中加载地区选项，如下图所示：
image.png

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

（2）在地区选择组件的onChange事件中加载安装地组件的选项，并清空其对应的表单数据值，如下图所示：
image.png
（3）点击表单设计器的预览按钮，即可测试选择联动效果。

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