<template>   <div style="width:300px;" >       <el-cascader         :options="options"         expand-trigger="hover"         @active-item-change="handleItemChange"         @change="handleChange"         :props="props"       style="width:530px;" ></el-cascader>   </div> </template> <script> import API from '@/api' export default {   name: 'area-select',   data () {     return {         options:\[\],         values:'',         texts:'',         props:{             value: 'id',             label:'name',             children: 'cities'         }     }   },   created () {         },   mounted(){     let page = this;      page.getCNodes('根',\[\]);   },   methods: {     getCNodes (parentid,currentIds) {         // console.log('加载下级节点')         let page = this;          let currentIdsSize = currentIds.length;         // console.log(currentIdsSize)         API.area.findChildren({             tyear:2016,             parentid:parentid         }).then(function (res) {             let cities = new Array();             res.forEach(function(r){                 if(r.depth < 5){                     cities.push({id:r.id,name:r.name,cities:\[\]});                 }else{                     cities.push({id:r.id,name:r.name});                 }                             });             if(currentIdsSize === 0){                 page.options = cities;             }else if(currentIdsSize === 1){                 page.options.forEach(function(r,index){                     if(r.id === currentIds\[0\]){                         page.options\[index\].cities = cities;                     }                 });             }else if(currentIdsSize === 2){                page.options.forEach(function(r0,i0){                     if(r0.id === currentIds\[0\]){                         page.options\[i0\].cities.forEach(function(r1,i1){                             if(r1.id === currentIds\[1\]){                                 page.options\[i0\].cities\[i1\].cities = cities;                             }                         });                     }                });             }else if(currentIdsSize === 3){                page.options.forEach(function(r0,i0){                     if(r0.id === currentIds\[0\]){                         page.options\[i0\].cities.forEach(function(r1,i1){                             if(r1.id === currentIds\[1\]){                                 page.options\[i0\].cities\[i1\].cities.forEach(function(r2,i2){                                     if(r2.id === currentIds\[2\]){                                         page.options\[i0\].cities\[i1\].cities\[i2\].cities = cities;                                     }                                 });                             }                         });                     }                });             } else if(currentIdsSize === 4){                page.options.forEach(function(r0,i0){                     if(r0.id === currentIds\[0\]){                         page.options\[i0\].cities.forEach(function(r1,i1){                             if(r1.id === currentIds\[1\]){                                 page.options\[i0\].cities\[i1\].cities.forEach(function(r2,i2){                                     if(r2.id === currentIds\[2\]){                                         page.options\[i0\].cities\[i1\].cities\[i2\].cities.forEach(function(r3,i3){                                             if(r3.id === currentIds\[3\]){                                                 page.options\[i0\].cities\[i1\].cities\[i2\].cities\[i3\].cities = cities;                                             }                                         });                                     }                                 });                             }                         });                     }                });             }                     })         .catch(function (error) {                      });       },     handleItemChange(val){       this.values = val;       // console.log(val)       let valSize = val.length;       let page = this;       if(valSize === 1){         //第2级节点获取         page.options.forEach(function(r,index){             if(r.id === val\[0\]){                 page.getCNodes(r.id,val);                 return;             }         });       }       if(valSize === 2){         //第3级节点获取         page.options.forEach(function(r,index){             if(r.id === val\[0\]){                 r.cities.forEach(function(r0,i0){                     if(r0.id === val\[1\]){                         page.getCNodes(r0.id,val);                         return;                     }                 });             }         });       }       if(valSize === 3){         //第4级节点获取         page.options.forEach(function(r0,i0){             if(r0.id === val\[0\]){                 r0.cities.forEach(function(r1,i1){                     if(r1.id === val\[1\]){                         r1.cities.forEach(function(r2,i2){                             if(r2.id === val\[2\]){                                 page.getCNodes(r2.id,val);                                 return;                             }                         });                      }                 });             }         });       }       if(valSize === 4){         //第5级节点获取         page.options.forEach(function(r0,i0){             if(r0.id === val\[0\]){                 r0.cities.forEach(function(r1,i1){                     if(r1.id === val\[1\]){                         r1.cities.forEach(function(r2,i2){                             if(r2.id === val\[2\]){                                 r2.cities.forEach(function(r3,i3){                                     if(r3.id === val\[3\]){                                         page.getCNodes(r3.id,val);                                         return;                                     }                                 });                             }                         });                      }                 });             }         });       }     },     handleChange (v){         let page = this;         page.options.forEach(function(r0,i0){             if(r0.id === v\[0\]){                 page.values = r0.id;                 page.texts = r0.name;                 r0.cities.forEach(function(r1,i1){                     if(r1.id === v\[1\]){                         page.values += ','+r1.id;                         page.texts += ','+r1.name;                         r1.cities.forEach(function(r2,i2){                             if(r2.id === v\[2\]){                                 page.values += ','+r2.id;                                 page.texts += ','+r2.name;                                 r2.cities.forEach(function(r3,i3){                                     if(r3.id === v\[3\]){                                         page.values += ','+r3.id;                                         page.texts += ','+r3.name;                                         r3.cities.forEach(function(r4,i4){                                             if(r4.id === v\[4\]){                                                 page.values += ','+r4.id;                                                 page.texts += ','+r4.name;                                             }                                         });                                     }                                 });                             }                         });                     }                 });             }         });     }   } } </script>