element UI-级联选择器（el-cascader）

1.需求：form中营业单位需要展示一级单位及二级单位。

2.实现：

1）el-form中添加el-cascader

<el-cascader   style="width: 140px"   :change-on-select="true"   :props="defaultParams"   :options="options"   v-model="selectedOptions"   :clearable="true"   @change="handleCascader"   @visible-change="visibleChange"> </el-cascader>

2）data中声明变量

  data () {     return {       options: [         {           'comName': '湖北分公司',           'comCode': '52',           'subComList': [             {               'comName': '湖北分公司宜昌区域中心',               'comCode': '5211',               'subComList': []             },             {               'comName': '湖北分公司襄阳区域中心',               'comCode': '5212',               'subComList': []             }           ]         }       ],       selectedOptions: [],       defaultParams: {         label: 'comName',         value: 'comCode',         children: 'subComList'       }     }   },

3）method中声明方法

 methods: {     // 下拉框初始化数据     visibleChange (bol) {       if (bol) { // bol为true时表示下拉框出险         this.getManageData()       }     },     // 获取级联选择器选中值     handleCascader () {       if (this.selectedOptions.length === 2) {         this.comCode = this.selectedOptions[1]       }     },     // 获取营业单位数据     getManageData () {       // 加载loading       let datas = {         'tradeMap': {           'manageCom': '' // 管理机构         }       }       this.$axios({         baseURL: './',         url: '',         method: 'post',         data: datas       }).then(res => {         console.log('查询res：：：：：')         console.log(res)         if (res.data.tradeMap.resultCode === '0000') {           let datas = res.data.tradeMap.ldcoms           console.log(datas)           this.options = this.getTreeData(datas)           console.log(this.options)         } else {           let message = res.data.tradeMap.message           this.$message.error(message)         }       }).catch(() => {         this.$message.error('请求数据失败,请重试')       })     },     // 格式化营业单位数据     getTreeData (data) {       // 循环遍历json数据       for (let i = 0; i < data.length; i++) {         if (!data[i].subComList || data[i].subComList.length < 1) {           // children若为空数组，则将children设为undefined           data[i].subComList = undefined         } else {           // children若不为空数组，则继续 递归调用 本方法           this.getTreeData(data[i].subComList)         }       }       return data     } }

4）实现效果