饿了么table后台排序以及分页问题

最新推荐文章于 2024-01-30 10:01:04 发布
最新推荐文章于 2024-01-30 10:01:04 发布
阅读量1.9k 收藏 5
点赞数
分类专栏： Vue ElementUI 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42634040/article/details/104819766
版权

首先，官网是这么说的
在这里插入图片描述
不需要后台的排序很简单，就不说了，接下来说一下对接后台的排序以及分页问题

首先在table上写一个 sort-change 事件，指向一个函数 sortChange
然后在需要排序的列上面写上 sortable=‘custom’
在这里插入图片描述
sort-change方法自带三个参数，分别代表意义是：
column：当前列
prop：当前列需要排序的数据
order：排序的规则（升序、降序）

下面是 sortChange 函数
点击对应的字段名以及升序或降序，将对应的参数发送ajax传到后台即可
在这里插入图片描述
至于分页的问题，只要换页的时候将排序的条件还一并传到后台即可，
这样就会保证相同的排序条件下只改变页码

小问号_
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3实现饿了么商家筛选排序（二）
mrhou的博客
04-25 2944
前言 这是对上一个饿了么项目的完善： vue3实现饿了么短信验证和高德定位 效果展示 ①完善了首页的内容，增加了广告轮播图、推荐美食栏和商家列表展示 ②对商家不同的排序方式、筛选商家 ③搜索关键词 具体实现 广告轮播图与美食推荐 这里引入了饿了么提供的mint-ui import { Swipe, SwipeItem} from 'mint-ui'; mint-ui提供了多种样式的...
ng-table下的后台分页实现
01-08
最近用到ng-table，根据网上一通搜索，最终确认使用ng-table作为表格展示，但是也有一些不尽如人意的地方，例如，分页的控件说实在的难以接受。后期再想办法完善吧。  一般网上的例子都是简单例子，并且都是客户端...
饿了么table排序
yixiaojing527的博客
08-31 286
排序
vue的表格和分页
祈澈菇凉
02-25 1652
前面有提到在vue里面，对于表格的使用：vue2.0 + element-ui 实战项目-渲染表格(四)https://www.jianshu.com/p/fea8cacc04b9，在实战的过程中，往往还要选择一个合适的分页，搭配着一起使用，尤其是数据比较多的时候，必然会做出分页效果。 关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便 Element UI手册：https://clou...
vue+element表格实现后台分页
weixin_44119790的博客
12-27 1234
element ui 的分页很强，虽然我也只用过这么一个ui 最近睡眠质量真不行，行吧，进入正题 首先我后台的接口已经获取到了我所需要的列表（里面包含我需要的所有数据） <el-table ref="filterTable" :data="detail.slice((currentPage-1)*pagesize,currentPage*pagesize)" ...
饿了么框架 el-table序号递增
qq_34508098的博客
06-09 602
饿了么框架 el-table序号递增 设置：：index=“formatIndex” method方法中： // 序号递增： formatIndex(index) { return index + this.listQuery.start + 1; }, 说明：序号等于当前页 start+1；因为第一页为0开始，第二页比如10开始，实际应该排序为11 ...
table排序分页
02-08
在网页开发中，"table排序和分页"是常见的数据展示功能，特别是在处理大量结构化数据时。Table，也就是表格，是一种直观、清晰地展示数据的方式。本篇将深入探讨table排序和分页的实现机制及其重要性。 一、Table...
vue element table 表格请求后台排序的方法
12-29
1、ElementUi文档已经说了，如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 <el-...
Bootstrap table分页问题汇总
09-02
Bootstrap Table 是一个流行的前端数据展示库，它基于 HTML 和 JavaScript，使用 Twitter Bootstrap ...理解和掌握这些概念以及如何配置 Bootstrap Table 的选项，能够帮助我们有效地解决遇到的问题，优化用户体验。
BootStrap Table前台和后台分页对JSON格式的要求
10-19
Bootstrap是一款前端非常流行的框架，其中的表格更为大家经常使用。下面通过本文给大家介绍BootStrap Table前台和后台分页对JSON格式的要求，一起看看吧
VUE 饿了么组件 1.4 table 属性之一
程序员写的技术 FAQ 和杂文
12-21 1357
代码中有二点介绍 :data 绑定的数据是 VUE 的 data.list 模板样式风格是浅色系的。 tooltip-effect="light" 通过这个来控制。
vue 组件之间的通信（父子组件，vuex）
qq_40072782的博客
07-30 943
1.深复制的使用场景以及如何用？意义 2.lodash。的使用引入 import _ from ‘lodash’ 解决_ is not defined 的问题
饿了么分页器封装完整代码示例（单页面多次调用同一个组件：分页器）
DXL131795的博客
07-08 1184
父级组件页面 <template> <div class="jichu_table" style="width:100%;height:calc(100% - 36px)"> <template> <!-- 表格一 --> <el-table border :data="tableDataone" element-loading-spinner="el-icon-loading"
配置项的形式二次封装饿了么table组件 vue
weixin_44510655的博客
08-20 597
配置项形式二次封装el-table vue
Element Pagination 分页请求两次接口BUG解决--测试可用！！！
qq_34227291的博客
09-08 2524
前言:下面的解决方法是我在网上查找其他的解决方法之后自己想到的其中的一个解决方法，测试没有问题，能够解决两次接口请求的BUG，有什么问题也可以及时评论提出来，或者大家有更好的方法可以评论~ bug：当选择最后至一页切换条数就会请求两次接口 PS1：选择最后一页（第2页） PS2：切换条数会请求两次接口 解决方法：根据【当前页 * 条数 > 总条数】进行判断 <el-pagination center background :pager-count="5" layout="prev,
vue2中饿了么表格组件中的行数据上下拖拽排序
最新发布
m0_73571867的博客
01-30 915
表格行数据拖拽
element-UI 分页器Bug，切换页码，页码改变但是页码高亮未变化
smouns_的博客
04-13 2068
Element-UI提供了分页器的两个方法，handleSizeChange和handleCurrentChange，然而在实际使用中，却发现再切换页面展示数量的时候，会出现一些BUG， 页面刷新了，高亮页码却还是上次选择的页面。可以用以下方法解决；在你的项目页面，你点击了分页按钮查看了后面页面的数据，然后变更了查询条件，查询了新的数据时，分页显示器上面还停留在上一次翻页的记录上面，而没有重置到第一页。1.最简单粗暴的手法，就是利用DOM渲染，刷新整个组件，这样，就模拟恢复到第一页的状态。
vue+饿了么做分页和表格查询并且实现交互
weixin_40679578的博客
08-27 1393
先说分页，一页显示十条数据，和后台商量了的是在地址后面拼一个字符串，拼1后台就返回第一页的数据展示在页面上。 如 http://xxx/attendance/record/1 后台直接返回第一页的 /2就是返回第二页的数据 handleCurrentChange (currentPage) { //点击页码，展示当前页码的数据 this.tableData.splice(0,10...
ant design table 合并后 分页问题
06-09
在使用 Ant Design 的 Table 组件进行合并单元格操作后，会出现分页的问题。这是因为 Table 组件在合并单元格时，对于被合并的单元格只会显示一个单元格内容，但是在分页时，每一页都是按照原始的数据进行分页的，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值