element ui 全选反选

 

 

<el-checkbox class="selectAll" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
   <el-checkbox v-for="item in rooms" :label="item.space_id" :key="item.space_id">{{item.name}}</el-checkbox>
</el-checkbox-group>


<script>
　　export default {
　　　　data(){
      　　return {
          　checkAll: false,

             checkedCities: [],

             rooms: [],

             spaceIds: [], // 选择房间id

             isIndeterminate: true

         }
       }，
　　　　methods: {
    　  handleCheckAllChange(val) {

            let checked = this.rooms.map((item) => {

               return item.space_id;

            });

            this.checkedCities = val ? checked : [];

            this.isIndeterminate = false;

            this.spaceIds = this.checkedCities;

          },

          handleCheckedCitiesChange(value) {

            this.spaceIds = value;

            let checkedCount = value.length;

            this.checkAll = checkedCount === this.rooms.length;

            this.isIndeterminate =

            checkedCount > 0 && checkedCount < this.rooms.length;

         },

      }
　　}　　

</script>