Vue+Element.ui Table 分页功能的简单实现(一)

最新推荐文章于 2024-07-03 11:19:28 发布
最新推荐文章于 2024-07-03 11:19:28 发布
阅读量298 收藏
点赞数
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43606316/article/details/110558932
版权

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

<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>
楷楷大人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+Element-ui实现分页效果实例代码详解
10-17
Vue.js是一个轻量级的前端框架，它结合Element UI库可以轻松实现高效的分页效果。Element UI提供了丰富的组件，其中包括`Pagination`分页组件，使得开发者能够快速实现美观且功能完善的分页功能。 在Vue+Element UI...
Element-UI分页组件连续点击后页码循环跳转问题解决方案
sxLDWX的专栏
11-29 4464
我在项目中发现当分页组件的总页数比较大的时候（数量级在十万到百万左右），若连续多次快速点击页码，分页组件会出现循环跳转的情况。效果图如下所示：说一下出现这个现象的原因！我的组件代码如下：<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-pa
Vue+ElementUI table表格分页
a5252145的博客
07-31 7943
Vue+ElementUI table表格分页 分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。 前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。 后端分页：因为是后端分页，前端在每点击一次分...
Element中的表格组件Table和分页组件Pagination
最新发布
weixin_65793170的博客
07-03 1145
在 Element UI 中，Table组件是一个功能强大的数据展示工具，用于呈现结构化的数据列表。它提供了丰富的特性，使得数据展示不仅美观而且高效。而Pagination组件是一个用于实现数据分页显示的强大工具。它允许用户在大量数据中导航，通过控制每页显示的数据数量和跳转到不同的页面，从而提高数据展示的效率和用户体验。简单记录
vue+element-ui中表格，分页的基本使用
kuang6760599的博客
05-31 2928
element-ui element-ui中分页的使用 在element-ui+vue实现分页是很简单的 以文章分页举例 首先我们需要明确，一般的前后台分离项目对于大批量表格数据的回传格式一般为： status:状态码 message:存放信息 page:当前页数(一般而言mybatis也好,JPA也好,当传入0时为第一页,也会有后台人员进行处理,从1开始) pageSize:总页数(这个可以通过page,total计算出来) total:数据总条数 data:回传的数据 <!-- 分页 -->
Element中分页的使用
qq_45894929的博客
11-04 418
<el-pagination layout="total,prev, pager, next,jumper" :page-size="pagination.pageSize" :current-page="pagination.pageNum" @prev-click="prevClick" @next-click="nextClick" @current-change="cu...
基于Vue+element-ui 的Table二次封装的实现
10-18
总的来说，Vue+Element-UI的Table二次封装是通过组合Vue的组件系统、数据绑定、事件处理、API调用来实现的。这样的封装让代码更加模块化，提高了代码复用率，同时也方便了团队协作和代码维护。在实际项目中，根据...
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
08-28
主要介绍了Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下
Vue+element-ui 实现表格的分页功能示例
01-19
本文介绍了Vue+element-ui 实现表格的分页功能示例，分享给大家，具体如下： 实现效果如下图所示： template部分： header-cell-style=rowClass xss=removed empty-text=emptyText> 债券名称 width=228> &...
vue+element ui table组件分页功能的实现
qq_45890290的博客
04-11 372
1. 在data函数中定义需要用到的对象 2. 在table组件中写入表格数据的操作 :data="绑定的数据对象.slice((当前页数 - 1) * 每一页数据的数量，当前页数 * 每一页数据数量)" 3. 将分页组件从element ui中复制过来 4. 把分页组件的事件定义出来 写入methods中 5. 最终效果 ...
element-ui 分页组件添加确定按钮，实现点击按钮后翻页功能
yehaocheng520的博客
03-12 2727
分页组件 测试那边提出的需求就是：分页组件后面添加一个button，用于实现翻页功能。 其实不添加功能，直接输入页码回车也是可以翻页的。 element-ui中的分页组件 查看文档后，发现element-ui并没有提供这样的功能，从网上也看到了一些其他的解决办法： 他的解决方法就是：给pagination分页组件添加要给ref属性，然后通过this.$refs.xxx的形式进行获取，然后修改其中的值。 <!--底部分页控件--> <div class="flex-space mt
element-ui Pagination分页只保留上一页下一页
一只没有脚的鸟
11-01 1598
有时数据量太大，比如日志数据没必要查看很久之前的，所以把页数屏蔽，不给系统造成卡顿，最简单的方式就是隐藏总条数、页数。
【个人笔记】elementui table组件分页的一个小问题
divergent_zlj博客
08-17 578
日前，在开发一个小项目的时候接收到后端小哥哥的一个反馈，悲惨的他兼职做了基础测试的事情，他跟我说你的table出现了一个小Bug，如果分页数在两页以上，当你删除非第一页的当前页的最后一个数据时，table不会返回上一页，即停留在当前页显示无数据，总得来说就是分页的数据总数正确，但是页数不对了，后来查到了一个解决方法，先记下来 <el-table :data:'data.slice((curr...
vue 分页， vue实现分页功能，vue实现表格分页
easyplayers的博客
07-14 1839
vue 分页 ，vue实现分页，vue实现表格分页
vue+element-ui实现分页
weixin_30578677的博客
08-05 77
我使用得是el-table+el-pagination来实现的， 话不多说，直接上代码 html代码部分 <!-- table --> <el-table :data="showData" stripe style="width:100%" v-loading="listLoading"> <el-table-column ...
Vue+Element-UI 实现分页显示效果
立志欲坚不欲锐，成功在久不在速度
05-03 7553
当我们从后端返回的数据量很大，并且根据需求我们需要将返回的数据全部都显示在页面中，默认情况下会把所有的数据全部显示在一个页面，这样非常影响视觉和页面的使用，所以需要使用分页 我这次使用的是Vue4.0 + Element-UI组件，Element-UI库非常的丰富，它提供了一个分页组件Pagination 展示效果：这个是获取两个时间段的上机记录 HTML部分： <el-c...
vue+element-ui实现分页功能
Wang_kaiya的博客
07-28 173
element-ui的表格 分页器代码 script的代码，还有return里面的代码: pagesize: 2, currpage: 1
Vue table表格模板
热门推荐
Tom__cy的博客
06-11 3万+
el-标签总结：https://blog.csdn.net/Tom__cy/article/details/89680067 el-pagination 封装: https://blog.csdn.net/Tom__cy/article/details/89926274 axios 封装请求数据：https://blog.csdn.net/Tom__cy/article/details/89918...
vue+element UI实现表格数据分页功能
03-30
Vue Element UI提供了el-pagination组件来实现表格数据的分页功能。以下是实现步骤： 1. 在Vue组件中引入el-pagination组件并定义分页属性 ``` <el-table :data="tableData" border> //表格内容 </el-table>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值