遇到的分页功能问题和表单选择框问题

element plus 分页功能无异常，数据表格选择有异常。

表格不能正常的全选所有数据，可以理解为不能分页之后全选。

目前只知道 toggleAllSelection功能，但是不知道怎么用。

有没有分享一下思路的

直接看代码吧，有用的话给采纳

<script setup>
  import { ref } from 'vue';
  const multipleTableRef = ref(null)
  const multipleSelection = ref([])
 
  //全选
  const toggleAllSelection = () => {
    multipleTableRef.value.toggleAllSelection();
  }
  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-08',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-06',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-07',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
  const handleSelectionChange = (val) => {
    multipleSelection.value = val;
  }
</script>
 
<template>
    <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" width="55" />
        <el-table-column label="Date" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column property="name" label="Name" width="120" />
        <el-table-column property="address" label="Address" show-overflow-tooltip />
    </el-table>
    <div style="margin-top: 20px">
        <el-button @click="toggleAllSelection()"
        >全选</el-button>
<!--        <el-button @click="toggleSelection([tableData[1], tableData[2]])"-->
<!--        >Toggle selection status of second and third rows</el-button-->
<!--        >-->
        <el-button @click="toggleSelection()">Clear selection</el-button>
    </div>
</template>
 
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>