以下是一个使用Vue3和
Element Plus编写的带分页功能的
表格示例：
```vue
<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编写带分页功能的
表格非常简单。通过使用响应式数据和分页器组件，我们可以轻松地创建一个可交互的
表格，并让用户轻松地浏
览和过滤数据。
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
