实现了分类的功能,还有其他的功能 我也会继续写

<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>