需求:需要在城市列表最上方,增加“全选”选项,点击全选,选中列表所有城市,再次点击取消全选
1.html部分
props:{
multiple:true,
value: "adCode",//接口返回的是adCode
label: "cityName",//接口返回的是cityName,对应的是每个选项显示的文字
children: "children",
},
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//是否全选过