VUE3+Element-Plus 实现分页组件跨页选择数据

<template>
            <div class="table">
                <el-table ref="table" :data="tableData" @selection-change="handleSelectionChange" :row-key="getRowKeys">
                    <el-table-column type="selection" width="" reserve-selection />
                    <el-table-column type="index" label="序号" width="60" />
                    <el-table-column prop="name" label="姓名" width="" />
                    <el-table-column prop="age" label="年龄" width="" />
                    <el-table-column prop="address" label="住址" width="" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small">操作按钮</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 分页组件 -->
                <div style="display: flex;justify-content: space-between;padding: 16px;">
                    <div style="font-size: 14px;padding-top: 8px;">{{ `共${itemPage.total}条` }}</div>
                    <div>
                        <el-pagination class="itemPage" v-model:current-page="itemPage.currentPage"
                            v-model:page-size="itemPage.pageSize" :page-sizes="[10, 20, 50, 100]" :small="itemPage.small"
                            :disabled="itemPage.disabled" :background="itemPage.background"
                            layout=" sizes, prev, pager, next, jumper" :total="itemPage.total"
                            @size-change="handleItemSizeChange" @current-change="handleItemCurrentChange" />
                    </div>
                </div>
            </div>
</template>

const tableData = ref<Data[]>([]);
//通过Ref获取表格的Dom节点
const table = ref();

interface Data {
    name: string,
    age: number,
    address: string,
}

//页面分页配置
const itemPage = ref({
    currentPage: 1,
    pageSize: 10,
    small: false,
    background: false,
    disabled: false,
    total: 0,
})

//选中表格行事件
const handleSelectionChange = (val: Data[]) => {

    console.log(val);

}

//清除所有已选中的表格行
function selectClear() {

    table.value.clearSelection();

}

//获取key标识
const getRowKeys = (row) => {

    // 注：row.XX XX是传递后台的唯一字段值
    return row.name

}

//触发分页回调
function handleItemCurrentChange(val) {

    itemPage.value.currentPage = val;
    //刷新方法
    // XXX();

}
function handleItemSizeChange(val) {

    itemPage.value.pageSize = val;
    //刷新方法
    // XXX();

}