尚硅谷vue实现图书增删改查分页源代码
时间: 2023-09-23 21:00:42 浏览: 50
尚硅谷是一家教育机构,其提供了vue实现图书增删改查分页的源代码,下面是一个简单的示例:
```
<template>
<div>
<h2>图书管理系统</h2>
<div>
<input v-model="searchText" placeholder="请输入关键字搜索" />
<button @click="searchBooks">搜索</button>
</div>
<table>
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="book in filteredBooks" :key="book.id">
<td>{{ book.name }}</td>
<td>{{ book.author }}</td>
<td>
<button @click="editBook(book.id)">编辑</button>
<button @click="deleteBook(book.id)">删除</button>
</td>
</tr>
</tbody>
</table>
<div>
<button @click="previousPage" :disabled="currentPage === 1">上一页</button>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
books: [
{ id: 1, name: '书籍1', author: '作者1' },
{ id: 2, name: '书籍2', author: '作者2' },
{ id: 3, name: '书籍3', author: '作者3' },
// 其他书籍数据...
],
currentPage: 1, // 当前页码
pageSize: 5, // 每页显示数量
searchText: '', // 搜索关键字
};
},
computed: {
filteredBooks() {
// 根据搜索关键字过滤图书列表
return this.books.filter((book) =>
book.name.toLowerCase().includes(this.searchText.toLowerCase())
);
},
totalPages() {
// 计算总页数
return Math.ceil(this.filteredBooks.length / this.pageSize);
},
},
methods: {
searchBooks() {
// 搜索图书
// 可根据需要调用后端API实现搜索功能
},
deleteBook(bookId) {
// 删除图书
// 可根据需要调用后端API实现删除功能
},
editBook(bookId) {
// 编辑图书
// 可根据需要跳转到编辑页面或显示一个弹窗等操作
},
previousPage() {
// 上一页
if (this.currentPage > 1) {
this.currentPage--;
}
},
nextPage() {
// 下一页
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
},
},
};
</script>
```
以上代码是一个简单的图书管理系统,通过计算属性和方法实现了图书的增删改查和分页功能。其中,books是存储图书数据的数组,currentPage是当前页码,pageSize是每页显示数量,searchText是搜索关键字。filteredBooks根据搜索关键字过滤图书列表,totalPages计算总页数。searchBooks方法用于搜索图书,deleteBook方法用于删除图书,editBook方法用于编辑图书,previousPage和nextPage方法分别实现上一页和下一页功能。