vue 实现 全部页全部选

这个是页面

 <!--表格-->
            <a-table 
            class="tableBox"
            :columns="columns" :dataSource="data" 
            :loading="loadingTable" :pagination="pagination" 
            @change="changePage" @showSizeChange="showSizeChange" 
            :rowKey="record => record.erpCustomerId" 
            :row-selection="rowSelection"
            :scroll="{y:260}"
            style="max-height: 400px"
            :locale="locale"
            >
            </a-table>
            <div style="margin-top:-45px; margin-left:22px">
                <a-checkbox @change="selectAll" :indeterminate="indeterminate" :checked="checkAll">
                    {{$t('selectAll')}}
                </a-checkbox>
            </div>

这个是js

//父组件传递的已经选择的
props: {
    alreadySelect: {
        type:Array,
        default: () => {
            return []
        }
    }  
    },
   computed: {
        rowSelection() {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    // this.$emit('getTotal', selectedRowKeys.length,selectedRows)
                    this.selectedRowKeys = selectedRowKeys
                    // this.indeterminate = !! this.selectedRowKeys.length &&  this.selectedRowKeys.length < this.data.length
                    // this.checkAll = this.selectedRowKeys.length === this.data.length
                    // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                    },
                selectedRowKeys: this.selectedRowKeys
                };
                },
    },
     watch: {
     //监听弹窗的打开给已选数组赋值
        async visible(newVal,oldVal) {
            if(newVal) {
                this.selectedRowKeys = this.alreadySelect
            }
        },
        selectedRowKeys(newVal, oldVal) {
        //获取目前的选中状态 半选还是全选还是不选
            this.getState(newVal,this.allErpCustomerIds)
            this.total = this.selectedRowKeys.length 
        },
       
    },

方法

getInclude(arr1, arr2) {
    let temp = []
    for (let item of arr2) {
        arr1.findIndex(i => i === item) !== -1 ? temp.push(item) : ''
    }
    // 半选
    if(temp.length > 0 && temp.length < arr2.length ) {
        return 2
    } else if(temp.length == 0) {
        return 1  //不选
    } else if(temp.length == arr2.length) {
        return 3  //全选
    }
}


deleteInclude(arr1,arr2) {
    return arr1.filter(item => {
        return !arr2.includes(item)
    })
}
getState(arr1,arr2) {
             // 一开始搜索5个 全部选了 又搜索了10个  应该改为半选
            if(getInclude(arr1,arr2 ) == 2) {
                this.checkAll = false
                this.indeterminate = true
            }
            // 选择了5个 又搜索了没有 应该把全部选置为空
                if(getInclude(arr1,arr2 ) == 1) {
                this.checkAll = false 
                this.indeterminate = false
                }
            // 选择了5个 又搜索了包含所有的 应该把全部选置为true
                if(getInclude(arr1,arr2 ) == 3) {
                this.checkAll = true 
                this.indeterminate = false
                }
        },

注：接口必须返回所有数据的id数组，不然分页数据不可能拿到所有的数据，在通过所有数据的id数组来请求接口拿到所有数据传递给父组件。