vue element-ui 表格的分页功能_elementui table 分页-程序员宅基地

技术标签: vue.js  vue2  

html

分页核心代码:给 el-table 加

                          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)

上述方法适用于数据量较少时,一次请求获取所有的数据,然后对全部的数据进行操作。

UI表格的表头加背景色,加给

<el-table :header-cell-style="{background:'#ccc',color:'#000'}"

<el-table
  :data="
    tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
  "
  style="width: 100%"
>
  <el-table-column label="Date" prop="date"> </el-table-column>
  <el-table-column label="Name" prop="name"> </el-table-column>
  <el-table-column label="操作">
    <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>

<!-- 表格分页 -->
<!-- pager-count pager-count属性可以设置最大页码按钮数,超出折叠,默认为7-->
<!-- 注意:若数据是后端接口返回的则此时:total="pageCount"-->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :pager-count="7"
  :current-page="currentPage"
  :page-sizes="[1, 3, 5, 10]"
  :page-size="pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="tableData.length > 0 ? tableData.length : null"
  background
  style="float: right; margin-top: 20px"
>
</el-pagination>

script

data数据

tableData: [
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    date: "2016-05-04",
    name: "222",
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    date: "2016-05-01",
    name: "333",
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    date: "2016-05-03",
    name: "4444",
    address: "上海市普陀区金沙江路 1516 弄",
  },
],

currentPage: 1,  //默认初始页
pagesize: 10,    //每页默认显示的数据
pageCount: 0,   //数据的总条数,如果数据是后端接口返回的,则此值需修改

methods方法

methods: {
  //表格编辑
  handleEdit(index, row) {
    console.log(index, row);
  },
  //表格删除
  handleDelete(index, row) {
    console.log(index, row);
  },
  //改变每页容纳的数据量
  handleSizeChange: function (size) {
    this.pagesize = size;
  },
  //切换页码
  handleCurrentChange: function (currentPage) {
    this.currentPage = currentPage;
  },
},

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/djh052900/article/details/123629956

智能推荐

1.1 基于B/S 结构的 Web 应用_b/s应用-程序员宅基地

文章浏览阅读1.5k次,点赞5次,收藏4次。选项,弹出首选项对话框,在左侧导航树中找到General->Content Types,在右侧Context Types树中展开Text,选择“Java Source File”节点,在下面的“Default encoding"输入框中输入“UTF-8",单击“Update”按钮,即可设置Java文件编码为UTF-8,如图1-9所示。而服务器端有两种,- -种是数据库服务器端,客户端通过数据库连接访问服务器端的数据,另一种是Socket服务器端,服务器端的程序通过Socket与客户端的程序通信。_b/s应用

使用 Docker 和 Traefik v1 搭建轻量代码仓库(Gogs)_gogs sqlite 性能-程序员宅基地

文章浏览阅读710次。本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议,欢迎转载、或重新修改使用,但需要注明来源。 署名 4.0 国际 (CC BY 4.0)本文作者: 苏洋创建时间: 2020年02月04日统计字数: 12336字阅读时间: 25分钟阅读本文链接: https://soulteary.com/2020/02/04/gogs-git-server-with-docker-and-..._gogs sqlite 性能

腾讯云新人专享福利:2024年4核8G12M轻量服务器优惠活动及性能测评_腾讯云 4核 活动-程序员宅基地

文章浏览阅读958次,点赞17次,收藏25次。用户仅需支付646元,便可享受一整年的服务,而且腾讯云还额外赠送3个月的服务时长,意味着用户实际上能享受到长达15个月的超值服务。无论是个人开发者的博客、中小企业的官网,还是云端网站、Web应用、小程序等,这款服务器都能提供强大的支持。这游戏比较吃内存,所以内存尽量在16G以上(Pocketpair官方的推荐配置是4核16G),CPU选4核即可,带宽方面推荐不限流量的固定带宽,延时低,畅玩体验更佳。到这一步的时候,帕鲁的服务端安装程序已经预置在服务的镜像里了,无需手动复制,非常方便。_腾讯云 4核 活动

ValueError: Error when checking target: expected denseclassify to have 3 dimensions, but got array w_error when checking target: expected lstm_4 to hav-程序员宅基地

文章浏览阅读2.2k次。ValueError: Error when checking target: expected denseclassify to have 3 dimensions, but got array with shape (8, 5)。使用keras搭建bilstm+selfattention的模型,进行多文本分类发现出现ValueError的错误,但检查发现denseclassify层的输..._error when checking target: expected lstm_4 to have 3 dimensions, but got ar

Windows使用PHP启动ThinkPHP项目,部署配置-程序员宅基地

文章浏览阅读4.2k次。这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar_启动thinkphp项目

生物科研软件(从科研到发文章)(转自小木虫)-程序员宅基地

文章浏览阅读537次。 生物科研软件(从科研到发文章)(转自小木虫) 1.文献管理与分析:EndNote X1,文献管理软件,平时方便论文管理,写文章的时候插入文献也是相当的方便;RefViz 2.1,文献分析软件,与EndNote结合使用,分析文献,可以省掉大把自己看自己归纳的时间;ReferenceManager似乎很久没有更新了,Thomoson看来以后可能只管EndNote了。2.分子生物学综合软件:..._oligoanalyzer 小木虫

随便推点

abap 转换成字符串_abap处理字符串-程序员宅基地

文章浏览阅读284次。1.字符串连接CONCATENATE dobj1 dobj2 ... INTO result[IN { BYTE | CHARACTER } MODE][SEPARATED BY sep].2.字符串分隔, split一个string的部分到一个内表或一系列的变量SPLIT dobj AT sep INTO{ {result1 result2 ...} | {TABLE result_tab}...

技术精英求职必备:大数据研发工程师简历模板_大数据开发工程师简历-程序员宅基地

文章浏览阅读1.1k次,点赞19次,收藏24次。在当今数据驱动的时代,成为一名优秀的大数据研发工程师意味着站在技术发展的前沿。本文提供了专为大数据研发工程师设计的未来简历模板和撰写指南。文章详细介绍了如何在简历中高效展示技术能力、项目经验和数据分析技巧,以适应不断变化的行业需求。我们强调了将复杂数据技能以清晰、有条理的方式呈现的重要性,并提供了创新的简历设计和布局建议,使您的简历在激烈的求职竞争中脱颖而出。此外,本文还涉及了大数据行业的最新趋势,确保您的简历内容既现代又前瞻。_大数据开发工程师简历

【视频】Python用LSTM长短期记忆神经网络对不稳定降雨量时间序列进行预测分析|数据分享...-程序员宅基地

文章浏览阅读118次。全文下载链接:http://tecdat.cn/?p=23544在本文中,长短期记忆网络——通常称为“LSTM”——是一种特殊的RNN递归神经网络,能够学习长期依赖关系(点击文末“阅读原文”获取完整代码数据)。本文使用降雨量数据(查看文末了解数据免费获取方式)进行分析。视频:LSTM神经网络架构和工作原理及其在Python中的预测应用什么是依赖关系?假设您在观看视频时记得前一个场景,或者在阅读一本..._基于深度学习lstm模型的多变量时间序列预测降水量预测

阿里云服务器地域如何选择?哪个地域快?地域价格差异_阿里云ecs地域差异-程序员宅基地

文章浏览阅读640次,点赞10次,收藏18次。阿里云服务器地域选择方法,如何选择速度更快、网络延迟更低的地域节点,地域指云服务器所在的地理位置区域,地域以城市划分,如北京、杭州、深圳及上海等,如何选择地域?建议根据用户所在地区就近选择地域,用户距离地域所在城市越近,网络延迟越低,速度越快。阿里云服务器网aliyunfuwuqi.com从速度延迟、备案限制、多产品内网互通、不同地域价格等四点因素来考虑地域的选择因素,可以在阿里云CLUB中心查看 aliyun.club 当前最新的云服务器优惠券和配置报价表_阿里云ecs地域差异

Flink批处理优化器之范围分区重写采用算法-程序员宅基地

文章浏览阅读67次。采样算法上一篇我们分析了RangePartitionRewriter的数据处理分支,接下来我们开始分析采样分支,采样分支的核心在于采样算法。因为范围分区输入端每个分区的数据量无从得知,也就是说我们无法得出采样比例。此时,如果先对每分区内的所有数据进行遍历,再记录出数据总量会显得很低效,因此Flink选择借助于水塘抽样算法(https://en.wik..._flink 怎么重写类

Unity Shader 之 简单滚动(uv)动画的效果实现_球化uv滚动-程序员宅基地

文章浏览阅读6.4k次。Unity Shader 之 简单滚动(uv)动画的效果实现目录Unity Shader 之 简单滚动(uv)动画的效果实现一、简单介绍二、实现原理三、注意事项四、效果预览五、实现步骤六、代码一、简单介绍Shader Language的发展方向是设计出在便携性方面可以和C++、Java等相比的高级语言,“赋予程序员灵活而方便的编程方式”,并..._球化uv滚动