实现了分类的功能,还有其他的功能 我也会继续写
<template>
<div>
<el-table stripe :data="tableData" style="width: 100%; height: 500px">
<el-table-column label="ISBN" prop="ISBN" width="100"> </el-table-column>
<el-table-column label="书名" prop="book_name" width="200">
</el-table-column>
<el-table-column label="作者" prop="author" width="200">
</el-table-column>
<el-table-column label="出版日期" prop="cb_date" width="100">
</el-table-column>
<el-table-column label="出版社" prop="cbs" width="150"> </el-table-column>
<el-table-column label="点击量" prop="click" width="50">
</el-table-column>
<el-table-column label="内容简介" prop="content" width="200">
</el-table-column>
<el-table-column label="评分" prop="pf" width="50"> </el-table-column>
<el-table-column label="位置" prop="place" width="50"> </el-table-column>
<el-table-column label="状态" prop="statuss" width="50">
</el-table-column>
<el-table-column align="right" width="170" fixed="right">
<template slot="header" slot-scope="scope">
<el-input
style="width: 100%"
v-model="search"
size="mini"
placeholder="输入关键字搜索"
/>
<span display>{{ scope.row }}</span>
</template>
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 点击事件 要在这里注册一下
@next-click 是点击下一页触发的事件
@prev-click 是点击上一页触发的事件
@current-page 是点击数字页码触发的事件
方法注册后,页面的参数 不用我们添加的 ,都已经封装好了
:page-size 指的是每个页面能显示的数据数
-->
<el-pagination
@next-click="handleNextClick"
@prev-click="handlePrevClick"
@current-change="handleCurrentChange"
:current-page="currentPage"
background
layout="prev, pager, next"
:page-size="10"
:total="dataCount"
>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
dataCount: 1, //tableData 有多少条数据
currentPage: 1, //当前是在第几页 默认当前页为第1页
allPage: "", //总几页数 根据tableData来确定
search: "", //搜索框
tableData: [
{
ISBN: "126578234",
author: "林达",
book_name: "刀背藏身 ",
category: 28,
cb_date: "8月 25, 2012",
cbs: "译林出版社",
click: 100,
content: "一段惊心动魄的故事",
pf: "4.43",
pic: "https://img2.doubanio.com/view/subject/m/public/s26947312.jpg",
place: "10-0-3",
statuss: 1,
},
{
ISBN: "126578235",
author: "[英] 劳伦斯·里斯",
book_name: "剑桥简明金庸武侠史",
category: 28,
cb_date: "1月 31, 2010",
cbs: "译林出版社",
click: 10,
content: "一段惊心动魄的故事",
pf: "1.83",
pic: "https://img2.doubanio.com/view/subject/m/public/s26821883.jpg",
place: "4-3-6",
statuss: 1,
},
{
ISBN: "126578236",
author: "张玮",
book_name: "胡金铨武侠电影作法",
category: 28,
cb_date: "4月 7, 2012",
cbs: "四川文艺出版社",
click: 43,
content: "一段惊心动魄的故事",
pf: "2.73",
pic: "https://img3.doubanio.com/view/subject/m/public/s28296410.jpg",
place: "4-3-5",
statuss: 1,
},
{
ISBN: "126578237",
author: "吴思",
book_name: "你我皆凡人 ",
category: 28,
cb_date: "1月 1, 2007",
cbs: "复旦大学出版社",
click: 23,
content: "一段惊心动魄的故事",
pf: "4.03",
pic: "https://img1.doubanio.com/view/subject/m/public/s28065718.jpg",
place: "3-0-4",
statuss: 1,
},
{
ISBN: "126578238",
author: "黄仁宇",
book_name: "云南房地产诉讼经典案例评析",
category: 28,
cb_date: "9月 22, 2011",
cbs: "人民文学出版社",
click: 32,
content: "一段惊心动魄的故事",
pf: "2.8",
pic: "https://img9.doubanio.com/view/subject/m/public/s23008994.jpg",
place: "1-5-5",
statuss: 1,
},
{
ISBN: "126578239",
author: "[美] 贺萧(Gail Hershatter)",
book_name: "倚天屠龙记(全四册) ",
category: 28,
cb_date: "11月 28, 2003",
cbs: "人民文学出版社",
click: 12,
content: "一段惊心动魄的故事",
pf: "4.38",
pic: "https://img9.doubanio.com/view/subject/m/public/s2241666.jpg",
place: "9-6-8",
statuss: 1,
},
{
ISBN: "126578234",
author: "林达",
book_name: "刀背藏身 ",
category: 28,
cb_date: "8月 25, 2012",
cbs: "译林出版社",
click: 100,
content: "一段惊心动魄的故事",
pf: "4.43",
pic: "https://img2.doubanio.com/view/subject/m/public/s26947312.jpg",
place: "10-0-3",
statuss: 1,
},
{
ISBN: "126578235",
author: "[英] 劳伦斯·里斯",
book_name: "剑桥简明金庸武侠史",
category: 28,
cb_date: "1月 31, 2010",
cbs: "译林出版社",
click: 10,
content: "一段惊心动魄的故事",
pf: "1.83",
pic: "https://img2.doubanio.com/view/subject/m/public/s26821883.jpg",
place: "4-3-6",
statuss: 1,
},
{
ISBN: "126578236",
author: "张玮",
book_name: "胡金铨武侠电影作法",
category: 28,
cb_date: "4月 7, 2012",
cbs: "四川文艺出版社",
click: 43,
content: "一段惊心动魄的故事",
pf: "2.73",
pic: "https://img3.doubanio.com/view/subject/m/public/s28296410.jpg",
place: "4-3-5",
statuss: 1,
},
{
ISBN: "126578237",
author: "吴思",
book_name: "你我皆凡人 ",
category: 28,
cb_date: "1月 1, 2007",
cbs: "复旦大学出版社",
click: 23,
content: "一段惊心动魄的故事",
pf: "4.03",
pic: "https://img1.doubanio.com/view/subject/m/public/s28065718.jpg",
place: "3-0-4",
statuss: 1,
},
{
ISBN: "126578238",
author: "黄仁宇",
book_name: "云南房地产诉讼经典案例评析",
category: 28,
cb_date: "9月 22, 2011",
cbs: "人民文学出版社",
click: 32,
content: "一段惊心动魄的故事",
pf: "2.8",
pic: "https://img9.doubanio.com/view/subject/m/public/s23008994.jpg",
place: "1-5-5",
statuss: 1,
},
{
ISBN: "126578239",
author: "[美] 贺萧(Gail Hershatter)",
book_name: "倚天屠龙记(全四册) ",
category: 28,
cb_date: "11月 28, 2003",
cbs: "人民文学出版社",
click: 12,
content: "一段惊心动魄的故事",
pf: "4.38",
pic: "https://img9.doubanio.com/view/subject/m/public/s2241666.jpg",
place: "9-6-8",
statuss: 1,
},
{
ISBN: "126578234",
author: "林达",
book_name: "刀背藏身 ",
category: 28,
cb_date: "8月 25, 2012",
cbs: "译林出版社",
click: 100,
content: "一段惊心动魄的故事",
pf: "4.43",
pic: "https://img2.doubanio.com/view/subject/m/public/s26947312.jpg",
place: "10-0-3",
statuss: 1,
},
{
ISBN: "126578235",
author: "[英] 劳伦斯·里斯",
book_name: "剑金庸武侠史",
category: 28,
cb_date: "1月 31, 2010",
cbs: "译林出版社",
click: 10,
content: "一段惊心动魄的故事",
pf: "1.83",
pic: "https://img2.doubanio.com/view/subject/m/public/s26821883.jpg",
place: "4-3-6",
statuss: 1,
},
{
ISBN: "126578236",
author: "张玮",
book_name: "胡铨武电影作法",
category: 28,
cb_date: "4月 7, 2012",
cbs: "四川文艺出版社",
click: 43,
content: "一段惊心动魄的故事",
pf: "2.73",
pic: "https://img3.doubanio.com/view/subject/m/public/s28296410.jpg",
place: "4-3-5",
statuss: 1,
},
{
ISBN: "126578237",
author: "吴思",
book_name: "你皆凡人 ",
category: 28,
cb_date: "1月 1, 2007",
cbs: "复旦大学出版社",
click: 23,
content: "一段惊心动魄的故事",
pf: "4.03",
pic: "https://img1.doubanio.com/view/subject/m/public/s28065718.jpg",
place: "3-0-4",
statuss: 1,
},
{
ISBN: "126578238",
author: "黄宇",
book_name: "你产诉讼经典案例评析",
category: 28,
cb_date: "9月 22, 2011",
cbs: "文学出版社",
click: 32,
content: "一段惊心动魄的故事",
pf: "2.8",
pic: "https://img9.doubanio.com/view/subject/m/public/s23008994.jpg",
place: "1-5-5",
statuss: 1,
},
{
ISBN: "126578239",
author: "[美] 贺萧(Gail Hershatter)",
book_name: "你倚天屠龙记(全四册) ",
category: 228,
cb_date: "11月 28, 2003",
cbs: "人民出版社",
click: 112,
content: "一段惊心动魄的故事",
pf: "4.38",
pic: "https://img9.doubanio.com/view/subject/m/public/s2241666.jpg",
place: "9-6-8",
statuss: 1,
},
],
tableData2: [],
};
},
methods: {
handleNextClick(val) {
console.log("handleNextClick", val);
//val 就是页码参数,我们只需要调用一下就好了
this.currentPage = val; //把当前页变一下 在处理一下数据
this.handleCurrentPageChange();
},
handlePrevClick(val) {
console.log("handlePrevClick", val);
this.currentPage = val; //把当前页变一下 在处理一下数据
this.handleCurrentPageChange();
},
handleCurrentChange(val) {
console.log("handleCurrentChange", val);
this.currentPage = val; //把当前页变一下 在处理一下数据
this.handleCurrentPageChange();
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleCurrentPageChange() {
this.dataCount = this.tableData2.length; //将数据的长度 给datacount
this.tableData = this.tableData2.slice(
(this.currentPage - 1) * 10,
this.currentPage * 10
);
},
},
mounted() {
this.tableData2 = this.tableData; //数据都在tableData 上改
this.handleCurrentPageChange();
},
};
</script>