EL UI checkbox 对查询结果数组全选 多选

先放效果


要注意的是，1是控制全选的勾勾是有2个值控制的
对于indeterminate和v-model绑定的isIndeterminate和CheckAll的值

如果true true 或者 true false样式为-

如果false true样式为√

如果false false样式为不勾

只修改isIndeterminate的值为true 或false v-model="id"de id不赋值为空，会造成下次选中用户的数组列表为2次选择结果的数组的组合
2是

<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group  class="user-list" v-model="id" size="medium" style="margin-top: 10px;">
  <el-checkbox-button class="user-item" v-for="item in userList" :label="item.id" :key="item.id">
      <img class="avatar" :src="item.avatar" alt="">
      <div class="username">{{ item.nickname }}</div>
  </el-checkbox-button>
</el-checkbox-group>
</template>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                form: {},
                level:'',
                count:null,
                foundLoading:false,
                btnLoading:false,
                userList:[], //查询出来的用户列表
                id:[],  //选中的id数组
                keyword:null,
                loading:false ,
                gradeList: [],
                checkAll: false,
                idLists:[],
                isIndeterminate: false
            };
        },
        methods: {
            search(){
                this.foundLoading = true;
                this.isIndeterminate = false; 
                this.checkAll = false;
                this.id =[];
                //这里的isIndeterminate 
                const params = {};
                request({
                    params: {
                        r: 'mall/coupon/search-user',
                        keyword: this.keyword,
                        gradeList:this.gradeList,

                    },
                }).then(e => {
                    this.foundLoading = false; 
                    this.idLists = [];  
                    if (e.data.code == 0) { 
                        this.userList = e.data.data.list;
                        this.userList.forEach(el => {                           
                            this.idLists.push(el.id);
                        });
                    }
                }).catch(e => {
                    this.foundLoading = false;
                });                
            },

            handleCheckAllChange(val) {
                this.id = val ? this.idLists : [];
                this.isIndeterminate = false;
            },
        },
    })
</script>

js代码很长，把一些别的功能也复制进去了，凑合着看吧0.0