element级联选择器

• 级联选择器：最近项目需要用到element的级联选择器，级联选择器就类似于咱们的地区选择器，分为省、市、县，给用户的选项是相关等级下相应的数据。
• 我这里只用到了省和市两级关联

 <el-cascader
            v-model="zoneId"
            :options="optionsZoneList"//绑定的数据
            :show-all-levels="false"//显示最后一级数据
            @change="handleChangeZone"
            :change-on-select="true"//
   ></el-cascader>
   //data
    optionsZoneList: [],
   //方法
   //在组件渲染的时候从服务端拿数据，渲染第一级数据
     getZoneList() {
      var data = {
        zoneId: 510000
      };
      getZoneListApi(data).then(res => {
        if (res.code == 200) {
          for (var i = 0; i < res.data.length; i++) {
            this.optionsZoneList.push({
              value: res.data[i].zoneId,
              label: res.data[i].zoneName,
              children: []
            });
          }
        }
      });
    },
    //通过点击事件，在用户点击的时候显示第二级数据
    handleChangeZone() {
      // console.log(this.zoneId);
      var data = {
        zoneId: this.zoneId[0]
      };
      getZoneListApi(data).then(res => {
        if (res.code) {
          // console.log(res.data);
          for (var i = 0; i < res.data.length; i++) {
            for (var j = 0; j < this.optionsZoneList.length; j++) {
              if (this.zoneId[0] == this.optionsZoneList[j].value) {
                console.log(11);
                this.optionsZoneList[j].children.push({
                  value: res.data[i].zoneId,
                  label: res.data[i].zoneName
                });
              }
            }
          }
        }
      });
    }，