a-checkbox 全选状态监听设置

功能介绍，通过勾选全选状态，所有内容均勾选，取消全选则所有内容均取消勾选，且监听勾选状态，当全部勾选了，则全选状态自动被勾选，反之则自动被取消勾选；效果如下：

 代码实现如下：

<template>
    <div class="toolbar-meta">  
        <vxe-pulldown  ref="vxePulldown" transfer>
            <template #default>
                <a-button  shape="circle" @click="open()" :size="16">
                    <vxe-icon style="font-size: 20px;" name="setting"></vxe-icon> 
                </a-button>
            </template> 
            <template  #dropdown> 
                <div class="downBox" >
                    <div class="checkTopAll"> 
                        <a-checkbox 
                        v-model="checkAll"  
                        @change="onCheckAllChange"
                        >全部
                        </a-checkbox>
                    </div>  
                    <div class="checkItem">
                        <a-checkbox-group class="checkLi" v-model="checkedList" :options="plainOptions" />
                    </div>
                     <!-- 底部按钮 -->
                     <div  class="downBtn clearfix">
                        <a-button class="btnOk" @click="sumbitOk">确认</a-button>
                        <a-button  class="btnReset"  @click="sumbitReset">还原</a-button>
                     </div>
                </div> 
            </template>
        </vxe-pulldown>
        
    </div>
</template>
<script> 
import { getAction, postAction, putAction} from '@/api/manage'
export default {
    name: 'setTableToolbar',
    components: { 
    },
    props: { 
        columns: {
            type: Array, 
            default: [],
        }
    },
    data(){
        return { 
            indeterminate: true,
            userInfo: {},
            checkAll: false,
            checkedList: [],
            plainOptions: [],
             url: {
                userAuthSave: '/...',

             }
        }
    }, 
    watch: {
        checkedList() { // 监听设置
            this.isCheckedAll()
        },
    },
    methods:{
        open(){
           this.$refs.vxePulldown.togglePanel()  
        },
        /**
         * 初始设置
         * @param {*} arr  所有选择项
         * @param {*} selearr  已选择项
         * @param {*} info  用户信息 保存使用
         */
        resetListLable(arr, selearr, info){
            this.userInfo = info || {}
            let plainOptions = []
            arr.forEach(item => {
                if(item.title&&item.dataIndex){ 
                  if(item.dataIndex.indexOf("column") == -1){
                        let objItem = {
                            label: item.title,
                            value: item.dataIndex
                        }
                        plainOptions.push(objItem)
                   } 
                } 
            });
            this.plainOptions = plainOptions
            let seletOption = []
            if(selearr){
                selearr.forEach(itm => {
                    if(itm.title&&itm.field){ 
                        if(itm.field.indexOf("column") == -1){
                     // if(itm.field.indexOf('/') == -1){
                            let objItem = itm.field
                            seletOption.push(objItem) 
                      //} 
                        }
                    } 
                }); 
            }
            this.checkedList = seletOption
        },
        // 全选设置
        onCheckAllChange(e){ 
            let newList = []
            if(e.target.checked){
                this.plainOptions.forEach(item =>{
                    newList.push(item.value)
                })
            } 
            this.checkedList = newList  
            this.isCheckedAll()
        },
        // 判断是否全选
        isCheckedAll(){
            let isAll = false
            isAll = this.checkedList.length == this.plainOptions.length ? true : false
            this.indeterminate = isAll
            this.checkAll = isAll
        },
        // 确认选中
        sumbitOk(){  
            this.postSubmit()
        },
        // 还原全选
        sumbitReset(){
            this.checkAll = true
            let newList = []
            this.plainOptions.forEach(item =>{
                newList.push(item.value)
            })
            this.checkedList = newList
            this.$nextTick(() => {
                this.postSubmit()
            })
        },
        // 请求
        postSubmit(){
            let extend = this.checkedList.join(',')
            // console.log(extend)
            let params = {
                "extend1": extend,
                "username": this.userInfo.username || '',
                "authType": this.userInfo.authType || '',
                "monthStr": this.userInfo.monthStr || ''
            }
            postAction(this.url.userAuthSave, params).then(res => {
                if(res.success){
                    this.$refs.vxePulldown.hidePanel()
                    // 保存后刷新父表
                    this.$emit('reshload')
                } else{
                    this.$message.error(res.message)
                }
            }) 
        }
    }
}

</script>
<style lang="scss">
.toolbar-meta{
    position: relative; 
}
.downBox{
        width: 180px;
        position: relative;
        overflow: hidden;
        border: 1px solid #999;
        border-radius: 4px;
        .checkTopAll{
            position: absolute; 
            top: 0;
            left: 0;
            border-bottom: 1px solid #999;
            padding: 10px 5px;
            width:100%;
            background-color: #fff; 
            z-index: 999;
        }
        .checkItem{
            position: relative;
            width: 180px; 
            max-height:200px; 
            overflow:auto; 
            padding: 10px;
            margin-top: 40px;
            margin-bottom: 40px;
            .checkLi{
                display: block;
                width: 100%;
            }
            .ant-checkbox-group-item{
                display: block;
            }
        }
        .downBtn{
            position: absolute;
            z-index: 999;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 5px 10px; 
            background: #fff;
            border-top:1px solid #999;
            .btnReset{
                float: right;
            }
        }
    }
</style>

以上内容仅供参考！