el-pagination怎么绑定el-table

你可以通过使用 `@pagination` 事件和 `:current-page`、`:page-size` 属性将 `el-pagination` 组件与 `el-table` 组件进行绑定。

首先，在 `el-pagination` 组件上添加 `@pagination` 事件，该事件在分页器的页码改变时触发。你可以在该事件中更新 `el-table` 组件的数据。

然后，将 `el-pagination` 组件的 `:current-page` 和 `:page-size` 属性绑定到 `el-table` 组件的相应属性上。这样，当分页器的页码或每页显示数量发生变化时，`el-table` 组件会自动更新数据。

下面是一个示例：

<template>
  <div>
    <el-table :data="tableData" :row-key="row => row.id">
      <!-- 表格列定义 -->
    </el-table>

    <el-pagination
      @pagination="handlePagination"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      total: 0 // 总条数
    };
  },
  methods: {
    handlePagination(page) {
      this.currentPage = page; // 更新当前页码
      this.fetchData(); // 根据新的页码和每页显示数量获取数据
    },
    fetchData() {
      // 发起请求获取数据，并更新 tableData 和 total
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

通过将 `@pagination` 事件和 `:current-page`、`:page-size` 属性绑定到 `el-table` 组件上，你可以实现分页功能并将分页器与表格数据进行绑定。