先上代码 代码有点乱 没来得及整理；
效果在最下边
<el-form-item label="包含省市">
<el-button v-for="(item, index) in form.checkProvince">{{ item }}<span class="el-icon-close" @click="deleteDataP(index)"></span></el-button>
<el-button v-for="(item, index) in form.checkCityList">{{ item }}<span class="el-icon-close" @click="deleteData(item,index)"></span></el-button>
<el-button @click="AddProvCities"><span class="el-icon-plus">添加</span></el-button>
<!-- 添加弹出框-开始-->
<el-dialog title="选择省市" :visible.sync="dialogTableVisible">
<div class="levelPanel">
<!--<el-cascader-panel ref="cascaderAddr" :options="options" emitPath='false' :props="props" @change="chooseCascader" v-model="form.ap"></el-cascader-panel>-->
<div>
<keep-alive>
<el-checkbox-group v-model="form.checkProvince">
<p v-for="(item,index) in province">
<el-checkbox :label="item.areaName" @change="getCity(item,$event)" :indeterminate="item.judge"></el-checkbox>
<span class="text" @click="getCityAll(item)">{{item.areaName}}</span>
</p>
</el-checkbox-group>
</keep-alive>
</div>
<div>
<keep-alive>
<el-checkbox-group v-model="form.checkCity" ref="checkboxL">
<p v-for="(item,index) in city">
<el-checkbox :label="item.areaName" @change="chooseCity(item,$event)"></el-checkbox>
<span class="text">{{item.areaName}}</span>
</p>
</el-checkbox-group>
</keep-alive>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogTableVisible = false">取 消</el-button>
<el-button type="primary" @click="makeSure">确 定</el-button>
</div>
</el-dialog>
<!-- 添加弹出框结束-->
</el-form-item>
data() {
return {
props: { multiple: true },
form: {
combinaName: '', // 组合名称
groupDes: '', // 备注
employeGroups: '', // 对应员工组
checkProvince: [], // 选择的省
checkCityList: [], // 选择的市
checkCity: [] // 每次选择的市存储的值
},
provAndCity: [], // 省和市的组合
province: [], // 获取的省
city: [], // 省对应的市
dialogTableVisible: false, // 控制弹出框
}
},
methods: {
// 保存
handerSave() {
},
// 点击添加事件
AddProvCities() {
// 循环省 如果省里面包含judge这个字段说明不是第一次进去，那就不赋值； 如果没有说明第一次进去，就赋值
if (this.province.length === 0) {
this.accessProvCities()
} else {
this.province = this.province
}
this.dialogTableVisible = true
// 获取省市
},
//
// 删除选择事件
deleteData(item, index) {
console.log(item)
console.log(this.form.checkCity)
this.form.checkCity = this.form.checkCity.filter(function(itemL){
return itemL !== item
})
this.form.checkCityList.splice(index, 1)
},
// 删除选择事件
deleteDataP(index) {
this.form.checkProvince.splice(index, 1)
},
// 获取省市
accessProvCities() {
var preParam;
var that = this;
provProvince(preParam).then(response => {
this.province = response.data
var preParam = {
provinceId: this.province[0].id
}
provCity(preParam).then(response => {
this.city = response.data
this.city = response.data.map(i => {
this.$set(i, 'addName', this.province[0].areaName)
return i
})
}).catch(function(error) {
console.log(error);
});
}).catch(function(error) {
});
},
// 点击省获取市
getCity(item, ev) {
var that = this;
// 省显示的横线去掉
item.judge = false;
this.form.checkCity = []
var preParam = {
provinceId: item.id
}
provCity(preParam).then(response => {
that.city = response.data
// 将省传递个市 以便删除市的时候 不选中省
that.city = response.data.map(i => {
this.$set(i,'addName', item.areaName)
return i
})
var valAll = []
// 点击省选中，市全部选中 如果选中后边的即选中，如果不选中市也不选中
if(ev === true){
that.city.forEach(function(itemP, index) {
valAll.push(itemP.areaName)
that.form.checkCity.push(itemP.areaName)
})
that.provAndCity.push({ name: item.areaName, value: [valAll] })
} else if (ev === false) {
that.provAndCity = that.provAndCity.filter(function(i){
return i.name !== item.areaName
})
that.city.forEach(function(itemP, index) {
that.form.checkCity.forEach(function(itemL, indexL) {
if (itemP.areaName === itemL) {
that.form.checkCity.splice(indexL, 1)
}
})
})
}
if (ev.target.checked === true ) {
that.city.forEach(function(itemP, index) {
that.form.checkCity.push(itemP.areaName)
})
} else if (ev.target.checked === false) {
that.city.forEach(function(itemP, index) {
that.form.checkCity.forEach(function(itemL, indexL) {
if (itemP.areaName === itemL) {
that.form.checkCity.splice(indexL, 1)
}
})
})
}
}).catch(function(error) {
console.log(error);
});
},
// 选择市
chooseCity(item, ev) {
var that = this;
if (ev === false) {
// 不选择的时候 去掉包含所有省市的 存储的市的值
that.provAndCity.forEach(function(itemA, indexA) {
if (item.addName === itemA.name) {
itemA.value.forEach(function(itemJ,indexJ){
itemJ.forEach(function(itemH, indexH){
if (itemH === item.areaName){
itemJ.splice(indexH, 1)
}
})
})
}
})
// 为去掉的省添加变量 是选择的样式发生变化
that.province.forEach(function(itemH, indexH) {
if (itemH.areaName === item.addName){
that.$set(itemH, 'judge', true)
}
})
// 选择市的时候 没有选中就去掉这个省
that.form.checkProvince = that.form.checkProvince.filter((itemL, index, arr) =>{
return itemL !== item.addName
})
} else if (ev === true) {
// 为去掉的省添加变量 是选择的样式发生变化
that.province.forEach(function(itemH, indexH) {
if (itemH.areaName === item.addName){
that.$set(itemH, 'judge', true)
}
})
}
// 判断市是全选还是不全选
that.allOrNone(item, that)
},
// 判断市 是全选还是不全选
allOrNone(item, that) {
if (this.form.checkCity.length === this.$refs.checkboxL.$children.length) {
that.form.checkProvince.push(item.addName)
// 点击市的时候 如果市全选 显示省 去掉所有省对应的市
that.removePointById(that.form.checkCityList,that.form.checkCity)
// 判断 如果点击市全选 控制省的样式
that.province.forEach(function(itemH, indexH) {
if (itemH.areaName === item.addName){
itemH.judge = false
}
})
} else {
this.form.checkCity.forEach(function(itemO,indexO) {
that.form.checkCityList.push(itemO)
})
that.form.checkCityList = that.unique1(that.form.checkCityList)
}
},
// 删除两个相同的数组； arr1:父数组 arr2:子数组
removePointById(arr1, arr2) {
for (let i = 0; i < arr2.length; i++) {
for (let j = 0; j < arr1.length; j++) {
if (arr2[i] === arr1[j]) {
let indexs = arr1.indexOf(arr1[j]);
arr1.splice(indexs, 1);
}
}
}
return arr1
},
// 数组去重
unique1(arr) {
let map = new Map()
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (!map.has(arr[i])) {
map.set(arr[i])
newArr.push(arr[i])
}
}
return newArr
},
// 确定按钮
makeSure() {
this.checkCity = []
this.dialogTableVisible = false
},
// 点击文字出现对应的市
getCityAll(item) {
this.checkCity = []
var that = this;
var preParam = {
provinceId: item.id
}
provCity(preParam).then(response => {
that.city = response.data
this.provAndCity.forEach(function(itemG, indexG) {
if (item.areaName === itemG.name){
that.form.checkCity = itemG.value[0]
}
})
that.city = response.data.map(i => {
this.$set(i,'addName', item.areaName)
return i
})
}).catch(function(error) {
console.log(error);
});
}
}