使用vue3 element plus 写一个表格 带分页功能

以下是一个使用Vue3和Element Plus编写的带分页功能的表格示例：

<template>
  <div>
    <el-table :data="tableData" :pagination="pagination" border>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="gender" label="Gender"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElPagination } from 'element-plus';

export default {
  components: {
    ElPagination
  },
  setup() {
    const tableData = ref([
      { name: 'John', age: 25, gender: 'Male' },
      { name: 'Jane', age: 30, gender: 'Female' },
      { name: 'Bob', age: 20, gender: 'Male' },
      { name: 'Alice', age: 28, gender: 'Female' },
      { name: 'Tom', age: 22, gender: 'Male' },
      { name: 'Lucy', age: 26, gender: 'Female' },
      { name: 'David', age: 24, gender: 'Male' },
      { name: 'Mary', age: 29, gender: 'Female' }
    ]);

    const pagination = ref({
      currentPage: 1,
      pageSize: 3,
      total: tableData.value.length,
      layout: 'total, sizes, prev, pager, next, jumper',
      pageSizes: [3, 6, 9, 12]
    });

    const handleSizeChange = (val) => {
      pagination.value.pageSize = val;
    };

    const handleCurrentChange = (val) => {
      pagination.value.currentPage = val;
    };

    return {
      tableData,
      pagination,
      handleSizeChange,
      handleCurrentChange
    };
  }
};
</script>

在示例中，我们使用了Vue3的`ref`函数来创建响应式的数据，包括表格数据`tableData`和分页器的配置`pagination`。我们还导入了Element Plus的分页器组件`ElPagination`，并将其添加到组件的`components`属性中。

在模板中，我们使用了`el-table`组件来创建表格，并传递了表格数据和分页器的配置作为属性。我们还使用了`el-table-column`组件来定义表格的列。最后，我们在表格下方添加了分页器组件，并将其属性绑定到分页器配置中。

在`setup`函数中，我们定义了`handleSizeChange`和`handleCurrentChange`函数来处理分页器的大小和当前页变化事件。这些函数将分页器的配置更新为新的值，以便表格和分页器可以自动更新。

总结：

使用Vue3和Element Plus编写带分页功能的表格非常简单。通过使用响应式数据和分页器组件，我们可以轻松地创建一个可交互的表格，并让用户轻松地浏览和过滤数据。