Vue+element-UI实现列表排序(sortable、custom)

news2025/2/24 21:26:27

1.sortable、custom区别:

在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false

可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。

可以使用sort-method或者sort-by使用自定义的排序规则。

如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。

2.sortable、custom分别应该在什么情况下使用:

1)sortable属性:当你的表格数据是简单的字符串或数字类型,并且你只需要对列进行普通的升序或降序排序时,可以使用sortable属性。

<el-table :data="tableData">
  <el-table-column prop="name" label="Name" sortable></el-table-column>
  <el-table-column prop="age" label="Age" sortable></el-table-column>
</el-table>

在上述示例中,sortable属性添加到了表格列上,表示该列可以进行排序。当用户点击表头的排序按钮时,表格会自动按照该列的值进行升序或降序排序。

2)custom属性:当你需要自定义排序逻辑,例如根据特定字段进行复杂的排序,或者需要对非字符串和数字类型的数据进行排序时,可以使用custom属性。

<el-table :data="tableData">
  <el-table-column prop="name" label="Name" sortable></el-table-column>
  <el-table-column prop="age" label="Age" sortable :sort-method="customSort"></el-table-column>
</el-table>

在上述示例中,custom属性添加到了需要自定义排序的表格列上,并通过:sort-method属性指定了一个自定义的排序方法customSort

methods: {
  customSort(a, b) {
    // 自定义排序逻辑
    // 返回负数表示a应该在b之前,返回正数表示a应该在b之后,返回0表示a和b相等
    // 可根据需要对a和b进行比较,并返回适当的值
  }
}

customSort方法中,你可以根据具体需求对ab进行比较,并返回相应的值,以实现自定义的排序逻辑。

总结:

  • 使用sortable属性进行简单的升序或降序排序。
  • 使用custom属性配合自定义的排序方法进行复杂的排序逻辑或非字符串和数字类型的排序。
  • 当数据较多时使用custom。因为sortable属性在处理大量数据或复杂的排序要求时可能会出现性能问题。

element ui 表格中的sortable属性只能实现当前页数据的排序,无法实现整张表全部数据的排序,所以需要采取自定义的排序方式重新触发接口,获取排序好的全部列表

Java后端的分页列表需要前端去传递这两个字段:

 el-table 上加上sort-change事件,当表格的排序条件发生变化的时候会触发该事件

@sort-change="onSortChange"

需要排序的列加上自定义的排序

sortable="custom"
:sort-orders="['ascending', 'descending']"

   <el-table
      v-loading="loading"
      :data="tableData"
      size="mini"
      :row-class-name="tableRowClassName"
      header-cell-class-name="table_header"
      @sort-change="onSortChange"
      fix
    >
  <el-table-column label="序号" type="index" width="55" align="center"/>
  <el-table-column
    label="备注"
    align="center"
    prop="notes"
    sortable="custom"
    :sort-orders="['ascending', 'descending']"/>
</el-table>
export default {
  data() {
  	// 记录表格数据
    tableData: [],
    // 查询参数
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      // 排序的列表字段
      column: null,
      // asc正序 desc倒序
      asc: null
    },
  },
  methods: {
  	// 点击排序
    onSortChange(column) {
      this.queryParams.column= column.prop
      this.queryParams.asc= column.order === "ascending" ? 'true' : 'false'
      // 获取后台列表数据
      this.getList()
    },
    // 重置按钮
    resetQuery() {
      this.queryParams.column= null
      this.queryParams.asc= null
      // 清除列表排序
      this.$refs.fingerTable.clearSort()
	  this.queryParams.pageNum = 1
      this.getList()
    },
  }
}

参考:Vue+element UI实现列表全部数据排序_elementui 排名列表_Song_Estelle的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/743533.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大数据Hive篇:explode 和 posexplode

一. explode单独使用。 1.1. 用于array类型的数据 table_name 表名array_col 为数组类型的字段new_col array_col被explode之后对应的列 select explode(array_col) as new_col from table_name1.2. 用于map类型的数据 由于map是kay-value结构的&#xff0c;所以它在转换的…

跨平台低延迟RTSP转RTMP推送技术方案探讨

实现RTSP摄像头数据转RTMP推送到服务器&#xff0c;可以用第三方库或者工具实现&#xff0c;总体设计架构如下&#xff1a; 一个好的转发模块&#xff0c;首先要低延迟&#xff01;其次足够稳定、灵活、有状态反馈机制、资源占用低&#xff0c;跨平台&#xff0c;最好以接口形式…

使用python get post数据 http https

0、目的 目的比较简单&#xff0c;测试&#xff0c;使用python来提交数据是非常简洁的&#xff0c;修改代码也容易&#xff0c;除了做人工智能&#xff0c;本身也是一个非常好的测试端工具 1、简单的post 一个简单的示例程序&#xff0c;将 headers 内容置为’application/j…

C#轻松读写NDEF智能海报

NDEF 全称 NFC data exchange format 即 nfc 数据交换格式&#xff0c;是一种标准化的数据格式&#xff0c;可用于在任何兼容的NFC设备与另一个NFC设备或标签之间交换信息。数据格式由NDEF消息和NDEF记录组成。 NDEF信息可以写到不同类型的NFC芯片中&#xff0c;如Ntag系列芯片…

Python算法笔记(1)-时间复杂度、空间复杂度

Python算法笔记&#xff08;1&#xff09;-时间复杂度 1.时间复杂度 时间复杂度是一个描述算法的运行时间的一个函数&#xff0c;它描述了算法的运行时间和输入数据的规模之间的关系&#xff0c;时间复杂度的表示方法用O表示&#xff0c;时间复杂度也用来考察输入值无限趋近无…

【嵌入式Qt开发入门】Qt如何使用多线程——继承QObject的线程

QObject 在上篇已经说过&#xff0c;继承 QThread 类是创建线程的一种方法&#xff0c;另一种就是继承 QObject 类。继承 QObject 类更加灵活。它通过 QObject::moveToThread()方法&#xff0c;将一个 QObeject 的类转移到一个线程里执行&#xff0c;可以通过下图理解。 通过…

注解和反射02(Java)

反射机制 首先需了解静态语言和动态语言。 动态语言是一类在运行时可以改变其结构的语言&#xff1a;例如新的函数、对象、甚至代码可以被引进&#xff0c;已有的函数可以被删除或是其他结构上的变化。通俗点说就是在运行时代码可以根据某些条件改变自身结构。主要动态语言&a…

一文解析Arm64 栈回溯

AArch64栈的结构 Arm64有4种栈&#xff0c;分别是空增栈(Empty Ascendant Stack,EA)、空减栈(Empty Descendant Stack,ED)、满增栈(Full Ascendant Stack,FA)、满减栈(Full Descendant Stack,FD)。常用的是满减栈&#xff0c;Linux内核也使用满减栈。 下图是一个满减栈的示意…

AppSpider Pro 7.4.053 for Windows - Web 应用程序安全测试

AppSpider Pro 7.4.053 for Windows - Web 应用程序安全测试 Rapid7 Dynamic Application Security Testing (DAST) 请访问原文链接&#xff1a;https://sysin.org/blog/appspider/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin…

分板机视觉定位切割软硬件方案

【检测目的】 定位切割 【拍摄效果图一】 【拍摄效果图二】 【拍摄效果图三】 【方案评估】 以目前样品进行实验来看&#xff0c;图像效果明显&#xff0c;可以找到中线位置。 视野&#xff1a;44mm*33mm 视觉精度&#xff1a;44mm/2448pixel0.018mm/pixel。 【硬件配置】…

抖音seo源码.视频剪辑功能开发(一)

一、短视频抖音seo账号矩阵系统 批量剪辑功能的开发一般有以下几种方式 1. 前端实现&#xff1a;通过前端技术&#xff0c;利用vue jquery layui JavaScript&#xff0c;等语言&#xff0c;实现一个可视化的编辑器&#xff0c;用户可以批量上传视频文件&#xff0c;设置剪…

uniapp-日历控件

第一步&#xff1a;打开uniapp的插件市场 网址&#xff1a;日历组件可选择周与月标记打卡支持左右切换 - DCloud 插件市场 第二步&#xff1a;导入相应的项目&#xff0c;会有相应的提示&#xff08;路径&#xff09; 第三步&#xff1a;引入对应的位置-例如我引入的位置 imp…

fastadmin视图渲染

基类app\common\controller\Backend会默认渲染以下几个对象到视图中 //渲染站点配置 $this->assign(site, $site); //渲染配置信息 $this->assign(config, $config); //渲染权限对象 $this->assign(auth, $this->auth); //渲染管理员对象 $this->assign(admin,…

ArcGISPro加载在线底图和影像

经常用ArcGIS都知道,在工作中配合在线地图有点多爽。无论是制图还是数据校核都非常方便。之前已经讲过如何在ArcGIS地图里利用simplegis插件加载多种在线地图,那换成pro咋办嘞 今天我们就来说说如何在ArcGIS Pro里加载在线地图 ArcGISPro本身就自带了两种影像,均是源自谷歌…

《Redis 核心技术与实战》课程学习笔记(八)

String 类型为什么不好用了&#xff1f; String 类型可以保存二进制字节流&#xff0c;只要把数据转成二进制字节数组&#xff0c;就可以保存了。String 类型并不是适用于所有场合的&#xff0c;它有一个明显的短板&#xff0c;就是它保存数据时所消耗的内存空间较多。 为什么…

不平衡电网条件下基于变频器DG操作的多目标优化研究(Matlab代码Simulink实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

贪心算法、贪心搜索/采样(greedy search/sampling)、集束搜索(beam search)、随机采样(random sample)

首先需要了解贪心算法&#xff1a; 贪心算法&#xff0c;又名贪婪法&#xff0c;是寻找最优解问题的常用方法&#xff0c;这种方法模式一般将求解过程分成若干个步骤&#xff0c;但每个步骤都应用贪心原则&#xff0c;选取当前状态下最好/最优的选择&#xff08;局部最有利的选…

Tenable Nessus 10.5.3 (Unix, Linux, Windows) - #1 漏洞评估解决方案

Tenable Nessus 10.5.3 (Unix, Linux, Windows) - #1 漏洞评估解决方案 发布 Nessus 试用版自动化安装程序&#xff0c;支持 macOS Ventura、RHEL 9 和 Ubuntu 22.04 请访问原文链接&#xff1a;https://sysin.org/blog/nessus-10/&#xff0c;查看最新版。原创作品&#xff…

开源堡垒机Guacamole二次开发记录之二

这篇主要记录录屏和SFTP的实现。 录屏及视频播放 对于录屏及录屏的播放&#xff0c;因为我们的项目中需要把guacd和java后端分开两台服务器部署&#xff0c;而guacamole的录屏是通过guacd程序录制的。我的要求是在Java后端直接把录好的视频文件通过http前端播放&#xff0c;因…

手机外壳缺陷视觉检测软硬件方案

单独使用一种光源效果图 同轴光会出现亮度不够的情况&#xff1b;回形面光因为光源中间的圆孔会使图像有阴影&#xff0c;造成图像效果不均衡&#xff0c;所以不采用单独光源打光 使用同轴回形面光源效果图 回形光源照亮产品要寻找的边缘&#xff0c;同轴光源起到补光的作用&a…