使用vue3 pinia 写出表格分页的代码 点击页码跳转到相应页面
时间: 2024-05-03 20:22:49 浏览: 17
以下是使用Vue3 Pinia实现表格分页的代码示例:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="item in paginatedData" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
<div v-if="totalPages > 1">
<ul>
<li v-for="page in totalPages" :key="page">
<button @click="goToPage(page)" :class="{ active: currentPage === page }">{{ page }}</button>
</li>
</ul>
</div>
</div>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { useStore } from 'pinia'
export default defineComponent({
name: 'TablePagination',
setup() {
const store = useStore()
const currentPage = computed(() => store.currentPaginationPage)
const itemsPerPage = computed(() => store.itemsPerPage)
const tableData = computed(() => store.tableData)
const totalPages = computed(() => Math.ceil(tableData.value.length / itemsPerPage.value))
const paginatedData = computed(() => {
const start = (currentPage.value - 1) * itemsPerPage.value
const end = start + itemsPerPage.value
return tableData.value.slice(start, end)
})
function goToPage(page) {
store.setCurrentPaginationPage(page)
}
return {
currentPage,
itemsPerPage,
tableData,
totalPages,
paginatedData,
goToPage,
}
},
})
</script>
```
在此示例中,我们使用了Pinia来管理状态,并使用计算属性来计算分页后的数据和总页数。我们还使用了一个方法来设置当前页码并更新状态。在模板中,我们使用了v-for指令来渲染表格和页码,并根据当前页码设置活动按钮的样式。点击页码时,我们将调用goToPage方法来设置新的当前页码。