Vue编写多地区选择组件

2020-06-12 21:11:37易采站长站整理

this.$set(pitem, 'selected', true)
}
}
})
} else {
return list.map(pitem => {
if (pitem.regionId === value.regionId) {
if (value.selected && value.selected === true) {
this.$delete(pitem, 'selected');
} else {
this.$set(pitem, 'selected', true)
}
} else {
this.$delete(pitem, 'selected');
}
})
}
},
resetToDefault () {
this.leftData = []; // 清空需要转移的数组
this.notLimitButton = { // 重置按钮状态
notLimitCity: false, // 城市不限
notLimitDistrict: false, // 地区不限
};
this.selectItem.city = {};
this.selectItem.distric = {}
this.removeAllSelected(this.cityList); // 清除选中状态
this.removeAllSelected(this.districList); // 清除选中状态
this.cityList = [];
this.districList = [];
},
getCityList (item) {
this.resetToDefault();
if (item) {
this.cityList = item.child; // 获取城市列表
this.selectItem.province = item; // 保存省份对象
this.mapSelect(this.chinaArea, item); // 高亮选择,单选
}
},
getDistricList (item) {
this.leftData = []; // 清空需要转移的数组
this.notLimitButton.notLimitDistrict = false; // 重置按钮状态
this.removeAllSelected(this.districList); // 清除选中状态
this.selectItem.distric = {};
this.districList = [];
if (item) {
this.districList = item.child; // 获取区域列表
this.selectItem.city = item; // 保存省份对象
this.mapSelect(this.cityList, item); // 高亮选择,单选
}

},
getAreaCombineID (item) { // 获取组合ID
if (item) {
this.selectItem.distric = item;
this.mapSelect(this.districList, item, 'manySelect'); // 区域高亮选择,多选

this.leftData.push({
regionName: this.selectItem.province.regionName + '-' + this.selectItem.city.regionName + '-' + item.regionName,
regionId: this.selectItem.province.regionId + '-' + this.selectItem.city.regionId + '-' + item.regionId
})
this.leftData = _.uniqBy(this.leftData, 'regionId');
if (this.leftData.length === this.districList.length) {
this.leftData = [];
this.notLimitButton.notLimitDistrict = true; // 转为不限制地区
this.leftData.push({
regionName: this.selectItem.province.regionName + '-' + this.selectItem.city.regionName + '-不限',
regionId: this.selectItem.province.regionId + '-' + this.selectItem.city.regionId + '-0'
})
}
}

},
cityNotLitmit (item) { // 城市不限
this.leftData = []; // 请空数组
this.notLimitButton.notLimitCity = !this.notLimitButton.notLimitCity; // 不限按钮状态
this.leftData.push({
regionName: this.selectItem.province.regionName + '-不限-不限',
regionId: this.selectItem.province.regionId + '-0-0'