element表格分頁多選、全選

<el-table stripe :data="list" border style="width: 100%" tooltip-effect="dark" v-loading="loading"
            element-loading-text="數據正在加載中" ref="multipleTable"
            @select="onTableSelect" @select-all="onTableSelectAll">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                
            </el-table>
            <!-- 分頁 -->
            <div class="el_page-box" style="text-align: right; margin-top: 10px;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pagesizeList" :page-size="pagesize"
                :layout="pageLayout" :total="total" :background='pageBackground'>
                </el-pagination>
            </div>

<script>

import { pagingSearchCom } from '@/components/mixins/pagingSearch';

import { tableSelectCom } from '@/components/mixins/tableSelect';

export default {
    mixins: [pagingSearchCom, tableSelectCom],
    props: {
        checkList: {
            type: Array,
            default(){
                return []
            }
        },
    },
    created(){
        this.checkRowList = JSON.parse(JSON.stringify(this.checkList));
    },
    methods:{
        // 列表接口
        _requestPageList(pageData) {
            let data = {
                pageData,
                name: "",
            }
            let _this = this;
            this.loading = true;
            getUserPageListByDept(data).then(res => {
                if (res.data.returnResult == 200) {
                    this.loading = false;
                    this.list = res.data.returnData.data || []; //賦值列表數據
                    this.total = res.data.returnData.recordCount; //設置數據總數目！！！
                    this._toggleRowSelectionMixin();//mixins表格回顯


                    return

                    // 以下是需要重置表格數據時寫法（新增一個屬性checkIn） -- 很少用到
                    let vcCheckInTypeList = [{id: 1},{id: 2}];
                    this.list = (res.data.returnData.data || []).map(e => {
                        let eIndex = _this.checkRowList.findIndex(ele => {return ele.id === e.id});
                        if(eIndex > -1){
                            e.checkIn = _this.checkRowList[eIndex].checkIn || vcCheckInTypeList[0];
                        } else {
                            e.checkIn = vcCheckInTypeList[0];
                        }
                        return e;
                    }); //賦值列表數據
                    this.total = res.data.returnData.recordCount; //設置數據總數目！！！
                    this._toggleRowSelectionMixin(true);//mixins表格回顯
                }
            })
        }
    }
}
</script>

需要引入下面封裝的分頁控件和多選、全選控件

import { pagingSearchCom } from '@/components/mixins/pagingSearch';

// import { pagingSearchCom } from '@/components/mixins/pagingSearch'
// mixins: [pagingSearchCom],

// 分頁、查詢 -- 封裝在mixins里
import { mapState } from 'vuex'
export const pagingSearchCom = {
    data(){
        return {
            loading: false,
            list: [], //列表數據
            currentPage: 1, //當前頁數
            pagesize: 10, //每頁顯示多少條
            pagesizeList: [10, 20, 30, 40, 50],
            pageLayout: "total, sizes, prev, pager, next, jumper",
            pageBackground: true,
            total: 0, //默認數據總數
            isCreated: false
        }
    },
    methods: {
        // 頁碼
        _getMixinsList(currentPage = this.currentPage, pagesize = this.pagesize) {
            this.currentPage = currentPage;
            this.pagesize = pagesize;
            this._requestPageList({
                pageNo: currentPage,
                pageSize: pagesize,
            })
        },
        // 列表接口
        _requestPageList(pageData) {},
        // 分頁
        handleSizeChange(size) {
            this.pagesize = size;
            this._getMixinsList(1, size)
            //console.log(`每頁 ${val} 條`);
        },
        handleCurrentChange(currentPage) {
            this._getMixinsList(currentPage)
            //console.log(`當前頁: ${val}`);
        },
        //查詢數據
        searchDataMixin() {
            // console.log('查詢成功')
            this._getMixinsList(1)
        },
    },
    created() {
        if(this.isCreated){
            return
        }
        this._getMixinsList();
    },
    computed: {
        // 通過VUEX動態計算表格的高度
        ...mapState({
            tableHeight: state => state.searchCriteria.contentBoxHeight - 180
        })
    }
}

引入下面封裝的分頁多選、全選控件

// import { tableSelectCom } from '@/components/mixins/tableSelect'
// mixins: [tableSelectCom],

export const tableSelectCom = {
    data(){
        return {
            checkRowList: [],
            innerVisible: true,
        }
    },
    methods: {
        closeEvt(){
            this.innerVisible = true;
            this.$emit('confirmEvt');
        },
        submitEvt(){
            this.$emit('confirmEvt', true, this.checkRowList);
        },
        // 取消默認選中項(單個勾選)
        /**
         *checkRowList 接口返回的默認勾選數組
        *id 列表唯一標識
        */ 
       onTableSelect (rows, row) {
            // console.log(rows,'rows',row,'row')
            if (!rows.includes(row)) {
                const index = this.checkRowList.findIndex(item => {return item.id === row.id});
                this.checkRowList.splice(index, 1)
            } else {
                this.checkRowList.push(row)
            }
        },
        // 全選操作
        onTableSelectAll (arr) {
            // console.log(arr,'全選or取消全選')
            if (!arr.length) { // 直接取消選中全部
                this.list.forEach((v) => {
                    const index = this.checkRowList.findIndex(i => {return i.id === v.id})
                    if (index !== -1) {
                        this.checkRowList.splice(index, 1)
                    }
                })
            } else { // 直接選中全部
                this.list.forEach((v) => {
                    const index = this.checkRowList.findIndex(i => { return i.id === v.id })
                    if (index === -1) {
                        this.checkRowList.push(v)
                    }
                })
            }
        },
        _toggleRowSelectionMixin(isCheck = false){
            let _this = this;
            this.list.forEach(e => {
                let rIndex = _this.checkRowList.findIndex(ele => {return ele.id === e.id});
                if(rIndex > -1){
                    if(isCheck){
                        // 如果列表的值可以改變，需要重新勾選以綁定改變的值
                        _this.checkRowList.splice(rIndex,1, e);
                    }

                    _this.$nextTick(() => {
                        _this.$refs.multipleTable.toggleRowSelection(e, true);//這個就是回顯的核心
                    })
                }
            })
        }
    }
}