vue3 element的table封装带分页

Vue3 Element UI 的 Table 组件是一个强大的表格展示组件，用于处理复杂的数据列表。如果你想对其进行封装并添加分页功能，通常会遵循以下步骤：

1. 引入依赖：首先在项目中安装 Element UI 和 Vue 自动化脚手架，如 `vue cli`。

npm install element-ui vue

2. 定义数据结构：创建一个数据模型来存储表格数据和分页信息。

import { ElTable, ElPagination } from 'element-ui';

export default {
  data() {
    return {
      tableData: [], // 存放表格原始数据
      pagination: {}, // 分页对象，初始化可以为空
      loading: false, // 加载状态标志
    };
  },
}

3. 创建表头和表格组件：根据实际需求配置列和属性，比如表头、排序、过滤等。

<template>
  <div>
    <el-pagination :total="pagination.total" :current-page="pagination.current_page" @current-change="handleCurrentChange" /> <!-- 分页控件 -->
    <el-table
      :data="tableData"
      :loading="loading"
      :row-key="getRowKey"
      style="width: 100%"
    >
      <el-table-column prop="name" label="姓名"></el-table-column> <!-- 表格列 -->
      <!-- 添加其他列 -->
    </el-table>
  </div>
</template>

<script>
// ... (继续上面的数据模型)
methods: {
  handleCurrentChange(page) {
    this.pagination.current_page = page;
    this.loadPage();
  },
  loadPage() {
    this.loading = true; // 开始加载
    // 模拟从服务器获取数据，替换为你的实际请求
    setTimeout(() => {
      const start = (this.pagination.current_page - 1) * this.pagination.per_page;
      const end = start + this.pagination.per_page;
      this.tableData = this.originalData.slice(start, end);
      this.pagination.total = this.originalData.length;
      this.loading = false; // 加载完成
    }, 1500); // 调整延迟时间
  }
}
</script>

4. 初始化数据：在 `created` 或 `mounted` 生命周期钩子里，你可以通过 API 或者本地数据源填充 `tableData` 和设置初始分页。

注意，这里假设你有一个名为 `originalData` 的数组，它包含了所有需要显示的数据。上述代码示例是一个基本的封装，实际使用时可能还需要考虑更多细节，例如错误处理、状态管理等。