博客

需求：需要在城市列表最上方，增加“全选”选项，点击全选，选中列表所有城市，再次点击取消全选

1.html部分

<el-cascader
   ref='cascader'
   v-model="cityCode"
   :options="areaOptions"
   :props="props"
    clearable
    @change="changeProblemType">
 </el-cascader>

cityCode：双向绑定最后要传给接口的值

areaOptions：选项显示的数据

props:相关配置，配置是否多选以及纠正接口返回的字段与要求字段不一致的问题

我的props配置：

props:{
          multiple:true,
          value: "adCode",//接口返回的是adCode
          label: "cityName",//接口返回的是cityName,对应的是每个选项显示的文字
          children: "children",
        },

以上，可以参考官方文档

https://element.eleme.cn/#/zh-CN/component/cascader

2.js部分

（1）首先，接口返回的数据，如果不符合el-cascader要求的数据格式（数据格式参考官网），需要对数据作处理

我这里接口返回的格式是，自定义方法转换成el-cascader需要的格式，方法如下

function convertCityTree (data) {
  let provinces = [], map = {}, cites = [];
  for (let area of data) {
    if (area.pid==0) {
      area.children = [];
      provinces.push(area)
      map[area.id] = area
    } else {
      cites.push(area)
    }
  }
  for (let city of cites) {
    let province = map[city.pid]
    if (province) province.children.push(city)
  }
  return provinces
}

返回的数据里，不包含“全选”的信息，因此，在获取城市之后，强制增加一组全选的信息

this.areaOptions = convertCityTree(response.data);
let selectAllopt = {
    adCode: '000000',
    cityName: "全选",
    children: [{
       cityName: "全选",
       adCode: '000000'
     }]
 }
 this.areaOptions.unshift(selectAllopt);
//this.areaOptions是显示的选项需要的数据，convertCityTree是在其他文件中引入的，如果返回的数据格式符合，不需要做这一步处理

在强制增加数据之后，显示正常了。

（2）点击全选

changeProblemType事件是在选择变化时，触发的事件，通过change绑定，默认参数是当前选中的所有数据的值，所有数据包括一级节点和二级节点

changeProblemType(value){
         
        //思路：点击全选，判断是传入的值是否包含了“全选”的code，我这里是000000
        for(var v = 0;v<value.length;v++){
          if(value[v][0]=='000000'){//如果传入的值包含了全选，也就是用户希望全选
            this.cityCode = this.handleSelectAllCity();//如果包含，将城市数据，赋值给要提交给接口的cityCode
            this.selectStates=1  // 改变状态，设置未已经全选
            return false
          }
          //如果已经有了全选（this.selectStates==1表示已经处于全选状态），再次点击要置空也就是取消全选
         if(this.selectStates==1){
           this.cityCode = [];
           this.selectStates=0;
           return false
         }else{//不是全选状态 ，正常点击城市
          this.cityCode  = value
         
         }
       }
      }

点击全选的时候，将接口返回的城市信息，赋值给v-model绑定的数据

handleSelectAllCity(){
        
            for(var k=0;k<this.areaOptions.length;k++){
              if(this.areaOptions[k].children.length>=1){
              
                for(var q = 0;q<this.areaOptions[k].children.length;q++){
                  let arr = [this.areaOptions[k].adCode,this.areaOptions[k].children[q].adCode]
                  // console.log(typeof arr) //object
                  this.selectAllData.push(arr)
                  //this.cityCode.push(arr)//这样子是不行的
                }
              }else {
                //市级省
                 let arr = [this.areaOptions[k].adCode,this.areaOptions[k].adCode];
                 
                 this.selectAllData.push(arr)
              }
            }
            
            return this.selectAllData;
             
            //this.cityCode = this.selectAllData;
      },

data中定义的数据：

props:{//配置
          multiple:true,
          value: "adCode",
          label: "cityName",
          children: "children",
        },
        cityCode: [],//提交的数据
        areaOptions:[],//显示的数据
        selectAllData:[],//
        selectStates:0//是否全选过