elementUI中表格分页勾选以及整体的全选功能结合。

<template>
<div>
    <div class="table taskcontent">
        <el-table :data="tabledata" style="width:100%" @selection-change='selRow' ref="multipleTable" :row-key="getRowKeys">
            <el-table-column type="selection" min-width="55" align="center" :reserve-selection="true"></el-table-column>
            <el-table-column prop="num" label="编号" min-width="120" align="center"></el-table-column>
            <el-table-column prop="name" label="任务名称" min-width="300" align="center"></el-table-column>
            <el-table-column prop="time" label="创建时间" min-width="300" align="center"></el-table-column>
        </el-table>
    </div>
    <el-checkbox label="全选" :indeterminate="isIndeterminate" v-model="checkAll" @change="selAll()" ></el-checkbox>
    <el-pagination
		@size-change="handlePageSize"
		@current-change="handleCurrentPage"
		:current-page="currentPage"
		:page-sizes="[3,5]"
		:page-size="pageSize"
		layout="total, sizes, prev, pager, next, jumper"
		:total="total">
	</el-pagination>
</div>
</template> 
<script>
export default {
     
    data() {
     
        return {
     
            selectedAssetsList:[],
            assetsUidList:[],
            currentPage:1,
            pageSize:3,
            total:8,
            isIndeterminate:false,//对el-checkbox控制不完整的全选状态
            checkAll:false,//对el-checkbox控制全选状态
            tabledata:[
            ],
            newTabledata: [ //el-table的数据内容
                {
     
                    id:1,
                    num: "201903123345",
                    name: "等级评价",
                    time: "2019-10-10"
                },
                {
        id:2,
                    num: "201903123346",
                    name: "供应商推荐",
                    time: "2019-10-14"
                },
                {
     
                    id:3,
                    num: "201903123348",
                    name: "供应商推荐",
                    time: "2019-10-15"
                },
                {
     
                    id:4,
                    num: "201903123350",
                    name: "我的报告",
                    time: "2019-10-16"
                },
                {
     
                    id:5,
                    num: "201903123345",
                    name: "等级评价",
                    time: "2019-10-10"
                },
                {
        id:6,
                    num: "201903123346",
                    name: "供应商推荐",
                    time: "2019-10-14"
                },
                {
     
                    id:7,
                    num: "201903123348",
                    name: "供应商推荐",
                    time: "2019-10-15"
                },
                {
     
                    id:8,
                    num: "201903123350",
                    name: "我的报告",
                    time: "2019-10-16"
                }
            ]
        };
    },
    mounted(){
     
        this.search();
    },
    methods:{
     
        // 获取row的key值
        getRowKeys(row) {
     
            return row.id;
        },
        handlePageSize(pageSize){
     
            this.pageSize = pageSize;
            this.search();
        },
        handleCurrentPage(currentPage){
     
            this.currentPage = currentPage;
            this.search();
        },
        search(){
     
            this.tabledata = this.newTabledata.slice((this.currentPage - 1)*this.pageSize,this.currentPage * this.pageSize);
        },
        //全选按键功能实现
        selAll() {
     
            if(this.$refs.multipleTable.selection.length < this.newTabledata.length){
     
                this.checkAll=true;
            }else{
     
                this.checkAll=false;
            }
            if(this.checkAll){
     
                this.newTabledata.forEach(row=>{
     
                    this.$refs.multipleTable.toggleRowSelection(row,true);
                });
            }else{
     
                this.$refs.multipleTable.clearSelection();
                this.selectedAssetsList = [];
                this.assetsUidList = [];
            }
        },
        stateChange(){
     
            var vm = this;
            if(vm.assetsUidList.length < this.newTabledata.length && vm.assetsUidList.length > 0){
     
                this.isIndeterminate = true;
            } else if(vm.assetsUidList.length == this.newTabledata.length){
     
                this.isIndeterminate = false;
                this.checkAll = true;
            } else if(vm.assetsUidList.length == 0){
     
                this.isIndeterminate = false;
                this.checkAll = false;
            }
        },
        //表格内checkbox触发的全选按钮状态变化
        selRow(val){
     
            const vm = this;
            // 选择的行的完整数据。
            vm.selectedAssetsList = Array.from(new Set([...vm.selectedAssetsList,...val]));
            const currentArr = val.map(item => item.id);
            const arr1 = [...vm.assetsUidList, ...currentArr];
            vm.assetsUidList = Array.from(new Set(arr1));
            const tableData = vm.tabledata.map(item => item.id);
            const difference = tableData.filter(v => !currentArr.includes(v));
            difference.forEach(item => {
     
                if (vm.assetsUidList.indexOf(item) !== -1) {
     
                    vm.assetsUidList.splice(vm.assetsUidList.indexOf(item), 1);
                }
            });
            // 把选中的行数据进行去重。
            var list = vm.selectedAssetsList.filter(item=>vm.assetsUidList.indexOf(item.id)!=-1);
            for(var i =0;i<list.length;i++){
     
                for(var j=i+1;j<list.length;j++){
     
                if(list[i].id==list[j].id){
     
                    list.splice(j,1);
                    j--;
                }
                }
            }
            setTimeout(()=>{
     
                this.stateChange();
            },0)
            
        },
    }
}
</script>