vue中el-checkbox全选、反选、多选的实现
作者：粽子师兄
这篇文章主要介绍了vue中el-checkbox全选、反选、多选的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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>checkbox多选框，indeterminate 状态
举个例子。比如选择星期。一周七天
2种方法。思密达。。。。第一种带局限性。笨办法，也发出来大家看看（推荐使用第二种）
这是方式的值是组件自带的值方式
const cityOptions = ['周一', '周二', '周三', '周四','周五','周六','周天']
<template>
<div>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<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,
checkedCities: [],
cities: cityOptions,
isIndeterminate: true,
arr:[]
}
},
methods: {
handleCheckAllChange(val) {
let tempArr = []
this.checkedCities = val ? cityOptions : []
this.isIndeterminate = false
// console.log(this.checkedCities)
// console.log(val)
if (this.checkedCities != []) {
if(val == true){
tempArr = [1,2,3,4,5,6,0]
this.arr = tempArr
}else if(val==false){
tempArr = []
this.arr = tempArr
}
}
console.log(this.arr)
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
var tempArr = []
for(let i=0;i<value.length;i++){
if(value[i] === '周一') {
tempArr.push(1)
}else if(value[i] === '周二'){
tempArr.push(2)
}else if(value[i] === '周三'){
tempArr.push(3)
}else if(value[i] === '周四'){
tempArr.push(4)
}else if(value[i] === '周五'){
tempArr.push(5)
}else if(value[i] === '周六'){
tempArr.push(6)
}else if(value[i] === '周天'){
tempArr.push(0)
}
}
this.arr = tempArr
console.log(this.arr)
}
}
}
</script>
<style scoped>
</style>之后UP想了一下。不对。后台反过来的数组不应该是这种。大部分都应该是obj的形式
于是乎。
const cityOptions = [{a:'周一',b:1}, {a:'周二',b:2}, {a:'周三',b:3},{a:'周四',b:4},{a:'周五',b:5},{a:'周六',b:6},{a:'周天',b:7}];对吧这种形式才对。说不定可能有很多很多。万一叫你把一个月都列出来也说不定。
继续上代码
<template>
<div style="height: 1000px">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city.b" :key="city.b">{{city.a}}</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = [{a:'周一',b:1}, {a:'周二',b:2}, {a:'周三',b:3},{a:'周四',b:4},{a:'周五',b:5},{a:'周六',b:6},{a:'周天',b:7}];
export default {
name: "tourSpecialEdition",
components: {},
data(){
return{
checkAll: false,
checkedCities: [],
cities: cityOptions,
isIndeterminate: false
}
},
created() {},
mounted() {},
methods: {
handleCheckAllChange(val) {
const arr = val ? cityOptions : [];
this.checkedCities = [];
arr.map(item => {
this.checkedCities.push(item.b);
console.log(this.checkedCities.sort())
});
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let arrTime = value
this.checkedCities = arrTime
console.log(this.checkedCities.sort())
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
}
</script>
<style scoped>
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。