vue中el-checkbox全选、反选、多选
实现一组数据的全选、反选、多选操作
·
描述:实现对一组数据进行全选,反选、多选操作
全选
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
this.checkInvert = false;
}
反选
handleInvertCheckChange(val) {
let cities = this.cities;
let checkedCities = this.checkedCities;
if (checkedCities.length === 0) {
checkedCities = val ? cities : [];
} else if (checkedCities.length === cities.length) {
this.checkedCities = [];
this.checkAll = false;
} else {
let list = cities.concat(checkedCities).filter((v, i, array) => {
return array.indexOf(v) === array.lastIndexOf(v);
});
this.checkedCities = list;
}
}
多选
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.cities.length;
this.checkInvert = false;
}
完整代码
<template>
<div>
<el-checkbox
v-model="checkAll"
@change="handleCheckAllChange"
:indeterminate="isIndeterminate"
>全选</el-checkbox
>
<el-checkbox v-model="checkInvert" @change="handleInvertCheckChange"
>反选</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>
</template>
<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
data() {
return {
checkAll: false,
checkInvert: false,
checkedCities: ["上海", "北京"],
cities: cityOptions,
isIndeterminate: true,
};
},
methods: {
// 全选
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
this.checkInvert = false;
},
// 反选
handleInvertCheckChange(val) {
let cities = this.cities;
let checkedCities = this.checkedCities;
if (checkedCities.length === 0) {
checkedCities = val ? cities : [];
} else if (checkedCities.length === cities.length) {
this.checkedCities = [];
this.checkAll = false;
} else {
let list = cities.concat(checkedCities).filter((v, i, array) => {
return array.indexOf(v) === array.lastIndexOf(v);
});
this.checkedCities = list;
}
},
// 多选
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.cities.length;
this.checkInvert = false;
},
},
};
</script>
<style>
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)