以下是
el-checkbox实现
全选、反选、多选的代码示例：
1.
全选
```html
<template>
<div>
<
el-checkbox v
-mod
el="checkAll" @change="handleCheckAllChange">{{ checkAll ? '取消
全选' : '
全选' }}</
el-checkbox>
<br>
<br>
<
el-checkbox-group v
-mod
el="checkedCities">
<
el-checkbox v
-for="city in cityOptions" :lab
el="city" :key="city">{{ city }}</
el-checkbox>
</
el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
cityOptions: ['北京', '上海', '广州', '深圳'], checkedCities: [],
checkAll: false,
isIndeterminate: false,
checkInvert: false
};
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? this.cityOptions : [];
this.isIndeterminate = false;
this.checkInvert = false;
}
}
};
</script>
```
2. 反选
```html
<template>
<div>
<
el-checkbox v
-mod
el="checkInvert" @change="handleCheckInvertChange">反选</
el-checkbox>
<br>
<br>
<
el-checkbox-group v
-mod
el="checkedCities">
<
el-checkbox v
-for="city in cityOptions" :lab
el="city" :key="city">{{ city }}</
el-checkbox>
</
el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
cityOptions: ['北京', '上海', '广州', '深圳'],
checkedCities: [],
checkAll: false,
isIndeterminate: false,
checkInvert: false
};
},
methods: {
handleCheckInvertChange() {
this.checkedCities = this.cityOptions.filter(city => !this.checkedCities.includes(city));
this.checkAll = this.checkedCities.length === this.cityOptions.length;
this.isIndeterminate = this.checkedCities.length > 0 && this.checkedCities.length < this.cityOptions.length;
}
}
};
</script>
```
3. 多选
```html
<template>
<div>
<
el-checkbox v
-mod
el="checkAll" @change="handleCheckAllChange">{{ checkAll ? '取消
全选' : '
全选' }}</
el-checkbox>
<
el-checkbox v
-mod
el="checkInvert" @change="handleCheckInvertChange">反选</
el-checkbox>
<br>
<br>
<
el-checkbox-group v
-mod
el="checkedCities" @change="handleCheckedCitiesChange">
<
el-checkbox v
-for="city in cityOptions" :lab
el="city" :key="city">{{ city }}</
el-checkbox>
</
el-checkbox-group>
<br>
<br>
<div>已
选中 {{ checkedCities.length }} 项</div>
<div v
-if="isIndeterminate">已
选中 {{ checkedCities.length }} 项，共 {{ cityOptions.length }} 项</div>
</div>
</template>
<script>
export default {
data() {
return {
cityOptions: ['北京', '上海', '广州', '深圳'],
checkedCities: [],
checkAll: false,
isIndeterminate: false,
checkInvert: false
};
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? this.cityOptions : [];
this.isIndeterminate = false;
this.checkInvert = false;
},
handleCheckInvertChange() {
this.checkedCities = this.cityOptions.filter(city => !this.checkedCities.includes(city));
this.checkAll = this.checkedCities.length === this.cityOptions.length;
this.isIndeterminate = this.checkedCities.length > 0 && this.checkedCities.length < this.cityOptions.length;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cityOptions.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityOptions.length;
this.checkInvert = false;
}
}
};
</script>
```
扫一扫
2121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
