element-ui 中的表格设置正确的排序以及怎么设置默认排序

本文主要解决两个问题,第一个,在element-ui中,直接设置参数排序,达不到预期效果,预期是按照数字的大小进行排序;第二个,想对表格中某个字段设置默认的排序方式
现象:
直接设置在 el-table-column设置sortable=true,点击升序降序,结果是字符串的排序结果,不是预期的按照数字大小排序,结果如下
<el-table-column :sortable="true" label="学号" ></el-table-column>


要达到预期,需要设置sort-method
<el-table-column:sortable="true":sort-method="sortMethod"prop="no"label="学号"show-overflow-tooltip></el-table-column>
// 按照数字大小排序 方法-
sortMethod(before, after) {return Number(before.no) - Number(after.no);
},
// 按照数字大小排序 方法二
sortMethod(before, after) {return before.no.localeCompare(after.no,"en-u-kn-true")
},
预期结果如下
此时可能会有进一步的需求,前端设置默认的排序方式,例如:默认设置成升序,此处提供两种
1、初始化数据时,先排序再渲染(此处就不展示例子了,直接通过对数据排序就行)
2、通过调整组件参数,直接设置默认排序方式
在实践第二种设置默认排序方式的时候,遇到一个问题,直接设置default-sort={prop:'no'},基本满足默认排序的情况,但是会有不太完美的地方,初次进来点击排序表头空白处或者是点击到取消了排序效果时,不会恢复到默认的排序方式。
针对上面的情况,我们使用sort-change,监听到order不存在的时候,意思就是默认进来或者是排序效果被取消时,我们直接手动的设置一下排序方式为默认的,下面就是怎么实现
备注:order包含['ascending', 'descending', null]

参考官方文档: https://element.eleme.cn/2.10/#/zh-CN/component/table
<el-tableref="table":data="tableData2"tooltip-effect="dark"@selection-change="handleSelectionChange":header-cell-class-name="cellClass"width="200"border:default-sort="{prop:'no'}"@sort-change="sortChange">sortChange({ column, prop, order }) {if (!order) {this.$refs.table.sort("no", "ascending");}},

预期结果,初始化进入页面就默认的是升序

通过上面的操作,就能达到预期的效果,此文章只针对前端排序哦,个人愚见,欢迎大家指教

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity NavMesh 清除不可行走区域

通常场景中物体设置为static或Navigation Static后&#xff0c;打开Navigation使用默认设置烘焙NavMesh&#xff0c;模型顶部和底部会出现蓝色网格&#xff0c;但其中有部分属于不可能到达区域&#xff0c;如下图 本文介绍两种可去掉NavMesh中不需要网格的方法&#xff1a; 方…

辽宁博学优晨教育科技有限公司视频剪辑培训打造技能新星

在数字时代&#xff0c;视频剪辑已成为一项炙手可热的技能。辽宁博学优晨教育科技有限公司&#xff0c;作为业内知名的教育培训机构&#xff0c;其视频剪辑培训项目备受关注。那么&#xff0c;辽宁博学优晨教育科技有限公司的视频剪辑培训究竟可靠吗&#xff1f;本文将为您深入…

从零学习Linux操作系统第二十七部分 shell脚本中的变量

一、什么是变量 变量的定义 定义本身 变量就是内存一片区域的地址 变量存在的意义 命令无法操作一直变化的目标 用一串固定的字符来表示不固定的目标可以解决此问题 二、变量的类型及命名规范 环境级别 export A1 在环境关闭后变量失效 退出后 关闭 用户级别&#xff…

vue大文件读取部分内容,避免重复加载大文件,造成流量浪费

使用场景&#xff1a;项目点云地图是pcd文件&#xff0c;但是文件可能上百兆&#xff0c;我需要获取到文件中的版本信息&#xff0c;跟本地的缓存文件做比较&#xff0c;如果不一致&#xff0c;才会加载整个文件。从而节省流量。 避免重复加载整个“.pcd文件&#xff0c;以最大…

LeetCode每日刷题:101. 对称二叉树

题目&#xff1a; 解题思路&#xff1a;可以新写一个函数&#xff0c;从root开始&#xff0c;root的left的头结点将记为lefttree&#xff08;左子树&#xff09;,root的lright的头结点将记为righttree&#xff08;右子树&#xff09;&#xff0c; 然后递归左子树的root.left与右…

qtday3作业

思维导图 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配…

SpringBoot-helloworld

1. helloworld 使用springboot完成一个简单的web应用&#xff0c;当访问/hello时&#xff0c;返回"hello springboot"字符串。 首先&#xff0c;创建一个maven工程&#xff0c;并引入依赖。 <!--使用springboot编写web应用前&#xff0c;需要声明父工程spring-b…

运维SRE-14 自动化批量管理

1.批量管理基础内容-SSH服务-远程连接服务 1.1SSH服务 SSH服务-OpenSSH&#xff0c;远程连接服务端&#xff1a;openssh-server客户端&#xff1a;openssh-clients openssh-7.4p1-21.el7.x86_64 openssh-server-7.4p1-21.el7.x86_64 #服务端 openssh-clients-7.4p1-21.el7.…

C#之WPF学习之路(2)

目录 控件的父类 DispatcherObject类 DependencyObject类 DependencyObject 类的关键成员和方法 Visual类 Visual 类的主要成员和方法 UIElement类 UIElement 类的主要成员和功能 FrameworkElement类 FrameworkElement 类的主要成员和功能 控件的父类 在 WPF (Windo…

Docker Desktop 4.27.1 Windows 10 安装 教程

Docker Desktop 4.27.1 Windows 10 安装 版本要求windows 版本要求wsl 版本要求docker desktop 版本 安装首先确保系统版本符合要求前提下安装wsl安装 Dockers Desktop安装说明 安装问题docker Desktop 无法正常启动&#xff0c;提示wsl 相关信息wsl --install 执行输出帮助日志…

GEE必须会教程—时间都去哪了(Date参数类型)

时间和空间是世界存在的两种基本属性&#xff0c;大部分的数据都有特有的通道存储时间信息&#xff0c;用户需要通过获取数据存储的信息&#xff0c;来判断数据的可用性&#xff0c;以及数据在时间上发生的变化。在遥感上&#xff0c;空间数据集合中&#xff0c;时间信息显得更…

机器学习——强化学习作业

作业内容 成功降落在两个黄色旗子中间为成功&#xff0c;其他为失败 Policy Gradient方法 Actor-Critic方法 范例结果 baseline Policy Gradient实现