软件教程 2025年08月6日
0 收藏 0 点赞 968 浏览 657 个字
摘要 :

文章目录 1.设置sortable=”custom” 2. 设置sort-change事件 3.自定义排序方法 elementui框架中的el-table表格,想要根据某一列实现后端排序,其实并不难,……




  • 1.设置sortable=”custom”
  • 2. 设置sort-change事件
  • 3.自定义排序方法

elementui框架中的el-table表格,想要根据某一列实现后端排序,其实并不难,只需要如下几步:

1.设置sortable=”custom”

对与需要排序的column列,加上sortable=”custom”的属性,类似如下:

<el-table-column
     sortable=\"custom\"
     prop=\"shiftFront\"
     label=\"偏前\">
 </el-table-column>

2. 设置sort-change事件

接下来我们需要在el-table上新增sort-change排序监听事件,类似如下:

<el-table
     :data=\"trayShiftList\"
     border
     v-loading=\"trayShiftLoading\"
     @sort-change=\"sortChange\">
//.....

3.自定义排序方法

最后我们需要自定义排序的方法,比如上面我们自定义的排序方法名为sortChange,我们定义如下:

sortChange(column) {
      // 获取字段属性
      var prop = column.prop
      //获取排序类型
      var order = column.order
      // ....
}

需要注意下排序类型的取值为:ascending(升序)和descending(降序)。

最后我们将想要的排序字段传给后端即可,以上就是elementui el-table实现后端排序的全部内容,希望对你有帮助!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6686.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号