1. 效果图
说明:点击弹窗按钮显示功能区。
2. 实现代码
<template>
<div>
<el-popover placement="bottom" title="标题" trigger="click">
<!-- 全选 -->
<el-checkbox
:indeterminate="indeterminate"
v-model="CheckAll"
@change="handleCheckAllChange"
>全选</el-checkbox>
<div style="margin:10px 0;"></div>
<!-- 城市类别多选 -->
<el-checkbox
:indeterminate="cityIndeterminate"
v-model="cityCheckAll"
@change="handlecityCheckAllChange"
>城市</el-checkbox>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
<div style="margin:10px 0;"></div>
<!-- 水果类别多选 -->
<el-checkbox
:indeterminate="fruitIndeterminate"
v-model="fruitCheckAll"
@change="handlefruitCheckAllChange"
>水果</el-checkbox>
<el-checkbox-group v-model="checkedFruits" @change="handleCheckedFruitsChange">
<el-checkbox v-for="fruit in fruits" :label="fruit" :key="fruit">{{fruit}}</el-checkbox>
</el-checkbox-group>
<!-- 输出数据的按钮 -->
<div @click="exportData">输出</div>
<!-- 触发气泡的按钮 -->
<el-button slot="reference">弹窗按钮</el-button>
</el-popover>
</div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
const fruitOptions = ['苹果', '香蕉', '葡萄', '榴莲'];
const allOptions = [...cityOptions, ...fruitOptions]
export default {
data() {
return {
cityCheckAll: false,
checkedCities: [],
cities: cityOptions,
cityIndeterminate: false,
checkCityLength: 0,
fruitIndeterminate: false,
fruitCheckAll: false,
checkedFruits: [],
fruits: fruitOptions,
checkFruitLength: 0,
CheckAll: false,
indeterminate: false,
checkedAll: [],
checkAllLength: 0
}
},
// 作用:设置全选按钮的样式及选中情况
// 触发:当城市、水果的选中情况发生改变时
watch: {
checkCityLength(newValue) {
this.checkAllLength = newValue + this.checkFruitLength
this.indeterminate = this.checkAllLength > 0 && this.checkAllLength < allOptions.length;
this.CheckAll = this.checkAllLength === allOptions.length
},
checkFruitLength(newValue) {
this.checkAllLength = newValue + this.checkCityLength
this.indeterminate = this.checkAllLength > 0 && this.checkAllLength < allOptions.length;
this.CheckAll = this.checkAllLength === allOptions.length
}
},
methods: {
// 作用:城市全选按钮改变
handlecityCheckAllChange(val) {
this.checkedCities = val ? cityOptions : []; // 设置对应的所有小选是否选中
this.cityIndeterminate = false; // 设置城市全选按钮样式
this.groupControlAll() // 设置全选按钮
},
// 作用:城市小选按钮改变
handleCheckedCitiesChange(value) {
this.checkCityLength = value.length;
this.cityCheckAll = this.checkCityLength === this.cities.length; // 城市小选控制城市全选
this.cityIndeterminate = this.checkCityLength > 0 && this.checkCityLength < this.cities.length; // 设置城市全选按钮样式
},
// 作用:水果全选按钮改变
handlefruitCheckAllChange(val) {
this.checkedFruits = val ? fruitOptions : [];
this.fruitIndeterminate = false;
this.groupControlAll()
},
// 作用:水果小选按钮改变
handleCheckedFruitsChange(value) {
this.checkFruitLength = value.length;
this.fruitCheckAll = this.checkFruitLength === this.fruits.length;
this.fruitIndeterminate = this.checkFruitLength > 0 && this.checkFruitLength < this.fruits.length;
},
// 作用:全选按钮改变
handleCheckAllChange(val) {
this.checkedFruits = val ? fruitOptions : []
this.checkedCities = val ? cityOptions : [];
this.cityCheckAll = val
this.fruitCheckAll = val
this.indeterminate = false
},
// 作用:设置全选按钮的样式、选中情况
groupControlAll() {
let num = this.checkedCities.length + this.checkedFruits.length
// 1. 当有项选中且没有全选
if (num !== allOptions.length && num !== 0) {
this.indeterminate = true
this.CheckAll = false
// 2. 当所有项都选中
} else if (num === allOptions.length) {
this.indeterminate = false
this.CheckAll = true
// 3. 当所有项都不选中
} else if (num === 0) {
this.indeterminate = false
this.CheckAll = false
}
},
exportData() {
let data = [...this.checkedFruits, ...this.checkedCities]
return data
}
}
}
</script>