使用element table表格实现后端排序

最新推荐文章于 2024-04-21 11:10:41 发布
最新推荐文章于 2024-04-21 11:10:41 发布
阅读量262 收藏
点赞数
分类专栏： 前端 文章标签： vue.js elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65355396/article/details/127006825
版权

 1,在el-table-colum中将sortables设置为custom，在table中监听sort-chang事件，在事件获取当前执行的排序操作.

 2.在sort-chang事件里根据执行的排序操作,对字段进行处理,然后传输给后端.

 小伙伴不太懂的可以打印sortChange里的参数了解一下~

，南栀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
el-table常用的排序方法后端排序（自定义方法）
jieweiwujie的博客
05-23 3133
表格点击排序箭头，需要排序，element组建的是前端当前页面排序，满足不了业务要求 通常，我们都需要所有数据进行排序。 小编给大家写了一种排序方法；官网的另外一种排序下一篇文章见。 <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="item in tableHeader" ...
Vue 中 element-ui table 结合后端请求实现排序
weixin_54351962的博客
04-26 7277
一.需求 需要对指定列，结合后端请求进行排序 二.知识点 2.1 如果需要结合后端请求排序，将需要排序的列上设置sortable为custom 2.2 同时在el-table标签上监听sort-change事件，在事件回调中可以获取当前排序列的字段名和排序顺序，从而将这些作为发起接口请求的入参 2.3 sort-change方法自带三个参数，分别为： column：当前列 prop：当前列需要排序的字段名 order：排序的规则（升序、降序和默认，默认就是没排序） 三.代码和注释如下 <el-tab
Vue之element table 后端排序实现
yueyekkx的博客
12-18 1967
1、如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 <el-table @sort-change='tableSortChange'> <el-table-column sortable='custom' prop="createTime" label="创建时间"> </el-table-column&g
el-table后端排序（不止当前页排序）
weixin_44172056的博客
04-07 478
2、在标签上添加自定义排序事件：@sort-change="sortChange"5、后端接收参数对象添加对应排序属性字段，在对应sql中（xml形式）根据条件进行拼接，注意，3、在列标签上设置 sortable="custom"这里的填充值使用了${}符号而不是#{}, #{}用于数据填充 ${}用于拼接关键字。sortModelField: '', //记录当前排序是用的哪个字段。sortModelOrder: '' ,//记录当前排序的顺序。
elmentui表格修改可点击排序元素
lml_little的博客
07-02 865
elemntui表格排序，对默认排序点击处理
vue element table 表格请求后台排序的方法
12-29
1、ElementUi文档已经说了，如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 <el-...
element表格翻页第2页从1开始编号(后端从0开始分页)
10-15
在本文中，我们将探讨如何在Element表格中实现从第2页开始编号为1，同时考虑到后端分页是从0开始的情况。 首先，我们需要明白问题的背景。通常情况下，后端API在处理分页时，页码是从0开始的，例如第1页对应于索引0...
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
ElementUI 的 `el-table` 提供了多种功能，如排序、筛选、行/列固定等。在大量数据场景下，我们需要关注其性能优化特性，如虚拟滚动（Virtual Scroll）。 3. **滚动事件监听**： 实现滚动懒加载的关键是监听表格...
vue+element-ui实现穿梭框数据自定义排序
12-05
在本文中，我们将深入探讨如何使用Vue.js框架与Element-UI库来实现穿梭框（Transfer）数据的自定义排序功能。Element-UI是基于Vue.js的一套丰富的UI组件库，其中包括了穿梭框组件，它常用于在两个列表之间进行数据的...
【elementUI系列三】el-table多列排序（后端排序）、重置后清除排序
qq_37485170的博客
10-31 3801
业务需求el-table需要支持多列排序，后端排序。即就是在点击后重新发送请求，点击一列的排序，另一列的排序样式能够保留，但是el-table默认是单列（一个字段）排序。点击一列排序，另一列排序自动消失一、解决方案想要支持多列排序，首先要定义一个数组，用于存放所有排序的字段及其顺序，设置列sortable=“custom”，结合sort-change事件header-cell-class-name属性，在点击排序箭头时进行排序操作。
el-table实现后端支持的排序
m0_45858045的博客
03-27 361
el-table实现后端排序
四种el-table的配置排序方式
ahwangzc的博客
10-17 4574
四：ref="table" ，this.$refs.table.sort('salesVolume','descending');二：:default-sort="{prop: 'salesVolume', order: 'descending'}"上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。参数prop属性指定排序列，order指定排序顺序。三：:sort-orders="['descending','ascending']"
el-table表格排序(需要后端判别)，el-table导出功能(向后端发送请求)
qq_42192641的博客
11-23 899
【代码】el-table表格排序(需要后端判别)，el-table导出功能(向后端发送请求)
el-table实现后台全量排序
qq_43592064的博客
04-23 3727
1.第一个关键点是在需要在要排列的列上加上sortable: ‘custom’, <el-table-column prop="date" label="打卡时间" sortable="custom" width="180"> 2.在table上添加事件,@sort-change="topTableSort" 如果有需要添加...
关于elementUI 表格组件 自定义sort 排序 （请求后端接口）
weixin_46654099的博客
06-02 1427
事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了。框架 spingboot + vue + mybatisplus + elementUI。思路：获取需要排序的字段 和 排序规则，传给后端使用mybatis的动态SQL实现。使用自定义的排序规则。如果需要后端排序，需将。属性即可实现以该列为基准的排序，接受一个。属性设置默认的排序列和排序顺序。属性，它用于格式化指定列的值，接受一个。，可以根据自己的需求进行处理。，同时在 Table 上监听。
Element Plus 表格后端排序
青春正在燃烧的博客
08-12 3859
element、element plus 表格tabel后端排序，取消默认空状态
前端使用el-table自带排序功能\后端排序
最新发布
m0_60594323的博客
04-21 693
前端排序调用后端
实现 el-table 拖拽行排序，并获取当前拖拽行的数据传入服务器
weixin_33905756的博客
12-19 4549
背景 由于在项目中碰到需要实现 行 拖拽排序，使用的是element ui库，查阅资料后发现，现在的element ui库中的el-table还不支持行拖拽排序。于是查阅的很多资料，发现是可以使用 sortablejs 实现拖拽的，但是它的拖拽是基于dom的，没有数据改变，而且项目中需要获取当前拖拽行的数据传给后台。。这就有点伤脑筋了，sortablejs 的 drag事件不能获取当前拖拽行的数据...
el-table sortable设罡为custom并可以同时选择多列排序以使用后端排序 完整代码
06-04
这里给出一个使用 Element UI 的 el-table 进行多列排序，并使用后端排序的代码示例： HTML模板部分： ```html <el-table :data="tableData" :default-sort="defaultSort" :sort-method="sortMethod"> <el-table-column prop="name" label="姓名" sortable="custom"></el-table-column> <el-table-column prop="age" label="年龄" sortable="custom"></el-table-column> <el-table-column prop="score" label="成绩" sortable="custom"></el-table-column> </el-table> ``` JavaScript部分： ```javascript export default { data() { return { tableData: [], // 表格数据 defaultSort: { // 默认排序 prop: 'name', order: 'ascending' }, sortColumns: [] // 多列排序的列属性数组 } }, methods: { // 多列排序方法 sortMethod(a, b) { for (let i = 0; i < this.sortColumns.length; i++) { const column = this.sortColumns[i] const prop = column.prop const order = column.order // 比较函数 const compareFn = (x, y) => { const a = x[prop] const b = y[prop] const result = a === b ? 0 : (a > b ? 1 : -1) return order === 'ascending' ? result : -result } const result = compareFn(a, b) if (result !== 0) { return result } } return 0 }, // 排序列变化回调函数 handleSortChange({ prop, order }) { // 清空之前的排序列 this.sortColumns = [] // 添加当前的排序列 if (prop && order) { this.sortColumns.push({ prop, order }) } // 发送后端排序请求 this.fetchData() }, // 后端排序数据请求 fetchData() { const params = { sortColumns: this.sortColumns } // 发送请求并更新表格数据 // ... } } } ``` 解释： 1. 在 el-table-column 中设置 sortable 属性为 custom，表示使用自定义排序方式。 2. 在 el-table 中设置 default-sort 属性为默认排序方式，并设置 sort-method 属性为多列排序方法。 3. 在多列排序方法中，遍历 sortColumns 数组，按照列属性和排序方式进行排序比较。 4. 在 handleSortChange 回调函数中，监听排序列变化事件，清空之前的排序列，添加当前的排序列，并发送后端排序请求。 5. 在 fetchData 函数中，发送后端排序请求，传递 sortColumns 参数，更新表格数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值