饿了么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
    评论
专栏目录
ng-table下的后台分页实现
01-08
最近用到ng-table，根据网上一通搜索，最终确认使用ng-table作为表格展示，但是也有一些不尽如人意的地方，例如，分页的控件说实在的难以接受。后期再想办法完善吧。  一般网上的例子都是简单例子，并且都是客户端...
table排序分页
02-08
table排序和分页table排序和分页table排序和分页table排序和分页table排序和分页
Element Pagination 分页请求两次接口BUG解决--测试可用！！！
qq_34227291的博客
09-08 2434
前言:下面的解决方法是我在网上查找其他的解决方法之后自己想到的其中的一个解决方法，测试没有问题，能够解决两次接口请求的BUG，有什么问题也可以及时评论提出来，或者大家有更好的方法可以评论~ bug：当选择最后至一页切换条数就会请求两次接口 PS1：选择最后一页（第2页） PS2：切换条数会请求两次接口 解决方法：根据【当前页 * 条数 > 总条数】进行判断 <el-pagination center background :pager-count="5" layout="prev,
饿了么table排序
yixiaojing527的博客
08-31 267
排序
vue2中饿了么表格组件中的行数据上下拖拽排序
最新发布
m0_73571867的博客
01-30 789
表格行数据拖拽
element-UI 分页器Bug，切换页码，页码改变但是页码高亮未变化
smouns_的博客
04-13 1973
Element-UI提供了分页器的两个方法，handleSizeChange和handleCurrentChange，然而在实际使用中，却发现再切换页面展示数量的时候，会出现一些BUG， 页面刷新了，高亮页码却还是上次选择的页面。可以用以下方法解决；在你的项目页面，你点击了分页按钮查看了后面页面的数据，然后变更了查询条件，查询了新的数据时，分页显示器上面还停留在上一次翻页的记录上面，而没有重置到第一页。1.最简单粗暴的手法，就是利用DOM渲染，刷新整个组件，这样，就模拟恢复到第一页的状态。
vue+饿了么做分页和表格查询并且实现交互
weixin_40679578的博客
08-27 1372
先说分页，一页显示十条数据，和后台商量了的是在地址后面拼一个字符串，拼1后台就返回第一页的数据展示在页面上。 如 http://xxx/attendance/record/1 后台直接返回第一页的 /2就是返回第二页的数据 handleCurrentChange (currentPage) { //点击页码，展示当前页码的数据 this.tableData.splice(0,10...
vue element table 表格请求后台排序的方法
12-29
1、ElementUi文档已经说了，如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 <el-...
BootStrap Table前台和后台分页对JSON格式的要求
10-19
Bootstrap是一款前端非常流行的框架，其中的表格更为大家经常使用。下面通过本文给大家介绍BootStrap Table前台和后台分页对JSON格式的要求，一起看看吧
Bootstrap table分页问题汇总
09-02
主要为大家汇总了Bootstrap table分页的典型问题，以及对应每个bootstrap table分页问题的解决方法，感兴趣的小伙伴们可以参考一下
vue 组件之间的通信（父子组件，vuex）
qq_40072782的博客
07-30 938
1.深复制的使用场景以及如何用？意义 2.lodash。的使用引入 import _ from ‘lodash’ 解决_ is not defined 的问题
vue+element表格实现后台分页
weixin_44119790的博客
12-27 1232
element ui 的分页很强，虽然我也只用过这么一个ui 最近睡眠质量真不行，行吧，进入正题 首先我后台的接口已经获取到了我所需要的列表（里面包含我需要的所有数据） <el-table ref="filterTable" :data="detail.slice((currentPage-1)*pagesize,currentPage*pagesize)" ...
前端element ui中的Table表格sortable实现全部数据分页排序
妄想症患者的博客
10-21 2056
【代码】前端element ui中的Table表格sortable实现全部数据分页排序。
饿了么分页器封装完整代码示例（单页面多次调用同一个组件：分页器）
DXL131795的博客
07-08 1170
父级组件页面 <template> <div class="jichu_table" style="width:100%;height:calc(100% - 36px)"> <template> <!-- 表格一 --> <el-table border :data="tableDataone" element-loading-spinner="el-icon-loading"
vue3实现饿了么商家筛选排序（二）
mrhou的博客
04-25 2933
前言 这是对上一个饿了么项目的完善： vue3实现饿了么短信验证和高德定位 效果展示 ①完善了首页的内容，增加了广告轮播图、推荐美食栏和商家列表展示 ②对商家不同的排序方式、筛选商家 ③搜索关键词 具体实现 广告轮播图与美食推荐 这里引入了饿了么提供的mint-ui import { Swipe, SwipeItem} from 'mint-ui'; mint-ui提供了多种样式的...
饿了么框架 el-table序号递增
qq_34508098的博客
06-09 588
饿了么框架 el-table序号递增 设置：：index=“formatIndex” method方法中： // 序号递增： formatIndex(index) { return index + this.listQuery.start + 1; }, 说明：序号等于当前页 start+1；因为第一页为0开始，第二页比如10开始，实际应该排序为11 ...
vue的表格和分页
祈澈菇凉
02-25 1646
前面有提到在vue里面，对于表格的使用：vue2.0 + element-ui 实战项目-渲染表格(四)https://www.jianshu.com/p/fea8cacc04b9，在实战的过程中，往往还要选择一个合适的分页，搭配着一起使用，尤其是数据比较多的时候，必然会做出分页效果。 关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便 Element UI手册：https://clou...
elementUI的table设置序号
zhangxiaodui的博客
04-26 8698
使用场景 饿了么的table表格的序号我本来使用的是 <el-table-column label="序号" type="index" width="50"></el-table-column> 如果表格每页显示10条数据，这样表格的每一页的序号都是1到10。 现在有个需求是第一页显示1-10，第二页显示11-20,。因此需要改一下。 解决方法 <el-table-column label="序号" width="50"> <template slot-scop
ant design table 合并后 分页问题
06-09
在使用 Ant Design 的 Table 组件进行合并单元格操作后，会出现分页的问题。这是因为 Table 组件在合并单元格时，对于被合并的单元格只会显示一个单元格内容，但是在分页时，每一页都是按照原始的数据进行分页的，因此会出现某些行被分到不同的页的情况。 解决这个问题的方法是使用 `rowSpan` 和 `colSpan` 属性，而不是合并单元格。具体地，可以在需要合并的单元格上设置 `rowSpan` 或 `colSpan` 属性，这样单元格会占用多行或多列，但是在 Table 组件内仍然算作多个单元格。这样在分页时，每一页都会按照实际的单元格数进行分页，不会出现某些行被分到不同的页的情况。 示例代码如下： ```jsx <Table dataSource={dataSource} pagination={pagination} rowKey="id"> <Column title="Name" dataIndex="name" key="name" /> <Column title="Age" dataIndex="age" key="age" /> <Column title="Address" dataIndex="address" key="address" render={(text, record, index) => { if (index === 0) { return { children: text, props: { rowSpan: 2, // 合并两行单元格 }, }; } if (index === 1) { return null; // 第二行单元格被合并，不需要渲染 } return { children: text, }; }} /> </Table> ``` 在上面的代码中，第三列的单元格需要合并前两行，因此在 `render` 函数中判断行索引，对第一行渲染单元格内容，并设置 `rowSpan` 属性为 2，对第二行返回 `null`，表示该行单元格被合并，不需要渲染。对于其他行，直接渲染单元格内容。这样在分页时，每一页都会按照实际的单元格数进行分页，不会出现某些行被分到不同的页的情况。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值