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

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

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

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

有没有分享一下思路的

我写了一个deMo,希望帮助到你

<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>

在Element Plus中，可以通过 toggleAllSelection 方法来实现表格分页后全选的功能。这个方法需要传入一个布尔值 isAllSelected，表示是否全选。具体使用方法如下：
1、在表格组件中添加 ref 属性，用于访问表格实例：

<el-table
  ref="table"
  :data="tableData"
  @selection-change="handleSelectionChange"
>
  <!-- 表格列定义 -->
</el-table>

2、在组件中定义 toggleAllSelection 方法，通过 this.$refs.table 获取表格实例，并调用 toggleAllSelection 方法：

export default {
  methods: {
    toggleAllSelection(isAllSelected) {
      this.$refs.table.toggleAllSelection(isAllSelected)
    },
    handleSelectionChange(selection) {
      // 处理表格选择变化事件
    }
  }
}

3、在表格分页变化事件中调用 toggleAllSelection 方法，传入当前选择的数据是否全选：

<el-pagination
  @current-change="handleCurrentChange"
  :total="total"
  :page-size="pageSize"
>
</el-pagination>

export default {
  methods: {
    handleCurrentChange(currentPage) {
      const isAllSelected = this.$refs.table.store.states.isAllSelected
      this.toggleAllSelection(isAllSelected)
      // 处理分页变化事件
    },
    // 其他方法
  }
}

在 handleCurrentChange 方法中获取当前选择的数据是否全选，并调用 toggleAllSelection 方法来更新表格选择状态。这样就可以实现表格分页后全选的功能啦，希望可以为你解决！

• 以下回答由chatgpt基于相关博客总结生成:

  对于使用element plus的分页功能和表单选择框中的toggleAllSelection功能，可以按照以下步骤进行：

  1.在template中定义el-table组件，以及相关的el-pagination、el-select组件，并绑定data数据；

  2.在script部分，初始化data数据，包括当前页码、每页显示行数、数据列表等；

  3.定义每页显示行数和当前页码的变化函数handleChangePage和handleChangePageSize，以及toggleAllSelection函数；

  4.在el-select组件中添加v-model="selection"，以及@change="handleChangePageSize"监听变化，实现每页显示行数的变化；

  5.在el-pagination组件中添加v-model="currentPage"，以及@size-change="handleChangePageSize"、@current-change="handleChangePage"监听变化，实现每页显示行数和当前页码的变化；

  6.在el-table组件中添加ref="table"属性，并通过@selection-change="handleSelectionChange"监听数据选择变化；

  7.在toggleAllSelection函数中遍历数据列表，调用toggleRowSelection函数来实现全选/取消全选的功能。

  具体实现代码可参考下方范例代码，注意替换其中的相关数据列表、选择变量等。

  <template>
    <div>
      <el-select v-model="pageSize" @change="handleChangePageSize">
        <el-option label="每页显示10行" :value="10"></el-option>
        <el-option label="每页显示20行" :value="20"></el-option>
      </el-select>
      <el-table :data="tableData" :row-key="row => row.id" stripe ref="table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
      <el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize" layout="total, prev, pager, next" :total="totalRows" @size-change="handleChangePageSize" @current-change="handleChangePage"/>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        totalRows: 0,
        currentPage: 1,
        pageSize: 10,
        tableData: [],
        selection: [],
      };
    },
    methods: {
      handleChangePage(val) {
        this.currentPage = val;
        this.getDataList();
      },
      handleChangePageSize(val) {
        this.pageSize = val;
        this.currentPage = 1;
        this.getDataList();
      },
      handleSelectionChange(val) {
        this.selection = val;
      },
      toggleAllSelection() {
        this.tableData.forEach((item) => {
          this.$refs.table.toggleRowSelection(item);
        });
      },
      getDataList() {
        //根据当前页码和每页显示行数获取数据列表
        //this.tableData = 数据列表;
        //this.totalRows = 总行数;
      },
    },
    mounted() {
      this.getDataList();
    },
  };
  </script>