vue表格分页行上移下移接口

vue表格分页行上移下移接口,第1张

如果您需要在Vue表格分页中实现行上移和下移的功能,您需要在后端接口中添加对应的代码逻辑,并在前端中调用相关接口实现 *** 作。下面是实现Vue表格分页行上移和下移接口的一些建议:
1 在后端接口中添加上移和下移的逻辑:如果您使用的是后端数据接口,您需要在后端代码中添加上移和下移的逻辑,以便在前端调用接口时实现对应的 *** 作。具体实现方式可以根据您的业务逻辑和数据结构来确定。
2 在前端中调用接口实现上移和下移:在Vue的组件中,您可以通过调用后端接口实现行的上移和下移。您可以在Vue中使用axios等>①总页数=总条数/每页显示条数  整体向上取整

②当前页码是由父组件传递的属性值,默认值为1

 所有的判断条件是为了让中间按钮除了前两页和最后两页外,都是选中状态

①只显示5个页码、一个上一页按钮、一个下一页按钮

总页码小于等于5的情况

②总页码数大于5时,有三种情况

前五页正常显示,此时展示右边的省略号,如下:

总页码大于5的情况并且是第一页数据

最后五页的显示状态如下:

右侧临界值,让i从倒数第四页开始循环,页码小于等于总页码数,每次+1

中间批次的页码永远都是中间页码被选中,前后都有省略号

让i从当前页码的前两页开始循环,循环到当前页码的后两页

给按钮绑定changePage事件,传入参数,如果参数为false,那么就是点击了上一页,true就是下一页,item就是页码

①点击上一页按钮

如果已经是第一页,那么就不能再点击上一页按钮,也就是要禁用上一页按钮,如图所示:

点击上一页,参数为false,如果当前页码为1,直接return,如果大于1,那么就每点击一次让页码减一

②下一页按钮和上一页按钮同理

③如果是其它( 页码 ),那么就直接将参数赋值给当前页这个变量

④最终将变量通过 自定义事件 ,传递给父组件,让父组件利用这个参数调用接口,重新发起请求获取数据并渲染页面。

Paginationvue
<!--
params:
pageNo: 总页数
current: 当前的页码
-->
<template>
<div class="pager">
<button class="btn btn-pager" :disabled="thiscurrent == 1" @click="prePage">上一页</button>
<span v-if="pageNo !== 1" class="page-index {{ 1 == current 'active':''}}" @click="goPage(1)">1</span>
<span v-if="preClipped" class="page-index"></span>
<span v-for="index in pages" class="page-index {{ index == current 'active':''}} " @click="goPage(index)">{{index}}</span>
<span v-if="backClipped" class="page-index"></span>
<span class="page-index {{ pageNo == current 'active':''}} " @click="goPage(pageNo)">{{pageNo}}</span>
<button class="btn btn-pager" :disabled="thiscurrent == pageNo" @click="nextPage">下一页</button>
</div>
</template>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12831169.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-28
下一篇 2023-05-28

发表评论

登录后才能评论

评论列表(0条)

保存