Vue+Element-ui<级联选择器（地区选择）>

首先要实现下面这种效果，格式最好是参照Element-ui上面给出的格式（具体参照https://element.eleme.cn/#/zh-CN/component/cascader，如果要和后端进行联调最好事先告知后端你需要的数据格式，万一后端给你返回的是一个对象（而你要的是一个数组），那就麻烦了。

这个是我在项目中用到的数据格式：

image.png

如果想要有 禁用效果，也最好实现跟后端说加一个字段 disabled (只需要加在最外层就行，具体可参照Element-ui)

效果图：

xuanze.gif

HTML部分：

props 属性具体可参考Element-ui文档，主要就是改变默认绑定的键值，改成自己想取的属性值

  <el-form-item label="运营地区：" prop="operatingArea">
          <el-cascader
            :show-all-levels="false"
            style="width:100%;"
            v-model="formData.operatingArea"
            :options="operatingAreaOptions"
            @change="handleItemChange"
            :props="{'multiple':true,value:'areaId',label:'areaName',children:'child',emitPath:false}"
            clearable
            collapse-tags
            placeholder="请选择运营地区，可多选"
          ></el-cascader>
        </el-form-item>

date部分：

formData:{
operatingArea:[] ,//选择的地区
operatingAreaTrue:[] //根据选择的地区返回的你想要的数据列表
},
operatingAreaOptions:[] //后端返回的地区列表

methods部分：

因为Element-ui默认只返回value的值，所以第一个方法就是起到筛选功能，根据选择的值，返回相对应的数据，此处返回的（ this.formData.operatingAreaTrue）值：

image.png

    //根据获取地区的id获取区域名
    getCascaderObj(vals, opt) {
      let result = [];
      let _this = this;
      hasAera(opt);
      function hasAera(val) {
        for (let i of val) {
          if (vals.indexOf(i.areaId) != -1) {
            result.push({ areaId: i.areaId, areaName: i.areaName });
          } else if (i.child && i.child.length != 0) {
            hasAera(i.child);
          }
        }
      }
      return result;
    },
    //根据获取地区的id获取区域名
    handleItemChange(value) {
      if (this.formData.operatingArea.indexOf("100000") != -1) {
        for (let i of this.operatingAreaOptions) {
          if (i.areaId != "100000") {
            i.disabled = true;
          }
        }
        this.formData.operatingArea = ["100000"];
        this.formData.operatingAreaTrue = [
          { areaId: "100000", areaName: "全国" }
        ];
        return false;
      } else {
        for (let i of this.operatingAreaOptions) {
          i.disabled = false;
        }
      }
      let arr = [];
      let val = this.getCascaderObj(
        this.formData.operatingArea,
        this.operatingAreaOptions
      );
      arr.push(...val);
      this.formData.operatingAreaTrue= arr;
    },