vue+element实现checkbox全选,全不选功能
vue+element实现checkbox全选,全不选功能我看了官方提供的案例,主要通过indeterminate属性来实现全选的效果。但是不太符合我们公司的需求,我就在官方基础上做了一点修改,从而实现全选和全不选的效果。我没有用indeterminate属性,主要是通过v-model绑定的布尔值去实现功能上代码:<template><el-checkbox v-m...
·
vue+element实现checkbox全选,全不选功能
我看了官方提供的案例,主要通过indeterminate属性来实现全选的效果。但是不太符合我们公司的需求,我就在官方基础上做了一点修改,从而实现全选和全不选的效果。
我没有用indeterminate属性,主要是通过v-model绑定的布尔值去实现功能
上代码:
<template>
<el-checkbox 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>
</template>
<script>
export default {
data() {
return {
checkAll: true, // 默认全选,主要通过该值控制全选和全不选
checkedCities: ['上海', '北京'],
cities: ['上海', '北京', '广州', '深圳']
};
},
methods: {
handleCheckAllChange() {
this.checkedCities = this.checkAll ? this.cities : [];
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
}
}
};
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)