elementui实现表表格el-table分页，默认选中，回显

在Element UI中实现带有分页的表格，并默认选中某些行，可以通过以下步骤实现：

1. 使用el-table组件来展示表格数据。
2. 使用el-pagination组件来实现分页功能。
3. 通过highlight-current-row属性来默认选中当前行。
4. 使用:data属性来绑定表格数据。
5. 监听分页组件的current-change事件来加载对应页面的数据。
6. 使用:default-sort属性来设置默认的排序。

以下是一个简单的例子：

<template>
  <div>
    <el-table
      :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
      highlight-current-row
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [
        // ... 填充你的表格数据
      ],
      // 默认选中行的id数组
      selectedRows: [1, 3]
    };
  },
  created() {
    // 默认选中行
    this.tableData.forEach((row, index) => {
      if (this.selectedRows.includes(index)) {
        // 假设你的表格数据中有一个唯一标识的id字段
        this.$refs.multipleTable.toggleRowSelection(row, true);
      }
    });
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  }
};
</script>

在这个例子中，tableData是你的表格数据数组，currentPage和pageSize用于跟踪当前页和每页显示的条目数。handleSizeChange和handleCurrentChange方法用于更新分页信息。在created钩子中，我们遍历表格数据，如果该行的索引位于selectedRows数组中，则通过toggleRowSelection方法选中这一行。

请注意，这个例子假设你的表格数据中有一个唯一标识的id字段，并且selectedRows包含了你想要默认选中行的索引。根据你的实际数据结构，你可能需要调整这些字段的名称和获取方式。