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>
Logo

前往低代码交流专区

更多推荐