element-ui中表格设置正确的排序及设置默认排序
作者:魔鬼君 发布时间:2024-05-09 15:25:48
标签: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-table
ref="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");
}
},
预期结果,初始化进入页面就默认的是升序
通过上面的操作,就能达到预期的效果,此文章只针对前端排序哦,个人愚见,欢迎大家指教
来源:https://blog.csdn.net/mo_gui_jun/article/details/129262702
0
投稿
猜你喜欢
- having的用法 having子句可以让我们筛选成组后的各种数据,having子句在查询过程中慢于聚合语句(sum,min,max,avg
- 本文实例讲述了Python实现的概率分布运算操作。分享给大家供大家参考,具体如下:1. 二项分布(离散)import numpy as np
- 这回我们看看如何实现判断两个对像的内容是否相等。这里有一个克隆结果原则是针对Java语言的,当然JavaScript也可以胜任。克隆满足的条
- Python在读取文件内容时的路径问题,值得深究一下.我想讨论的重点还是在绝对路径上面.在这之前我们先看一下1:相对路径这张图演示了在相对路
- 本文实例总结了GO语言基本数据类型。分享给大家供大家参考。具体如下:1、注释(与C++一样)行注释://块注释:/* ...*/2、标识符可
- PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试、语法高亮、Proje
- python2.7,下面是跑在window上的,稍作修改就可以跑在linux上。实测win7和raspbian均可,且raspbian可以直
- 在很多情况下,我们可能需要控制某一段代码只执行一次,比如做某些初始化操作,如初始化数据库连接等。 对于这种场景,go 为我们提供了 sync
- 最近在学习Vue.js,把自己遇到的问题做个记录,所以,今天添加一点小笔记。在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不
- 下面是在深度学习数据集处理过程中可能会用到的一个小程序,帮助我们根据图片文件的名字来分开图片:import osimport shutilp
- fullcalendar 版本:v5.9.0解决方案fullcalendar next ,prev等切换月份的按钮是没有回调函数,要想由回调
- 需求最近公司有个大屏展示项目(如下图)页面的元素需要做响应式监听,图表需要跟着窗口响应变化问题每一个图表都被我写成了一个组件,然后就在每一个
- CACHE_BACKEND参数每个缓存后端都可能使用参数。 它们在CACHE_BACKEND设置中以查询字符串形式给出。 有效参数如下:&n
- 不得不说python的自制包的相关工具真是多且混乱,什么setuptools,什么distutils,什么wheel,什么egg!!怎么有这
- 简述公司使用gitlab 来托管代码,日常代码merge request 以及其他管理是交给测试,鉴于操作需经常打开网页,重复且繁琐,所以交
- 介绍我们用django在本地调试完了之后,会在服务器上进行部署,如果是大佬那就忽略本文章,如果是萌新对编程命令不太熟悉,那就要用到宝塔了。流
- 1、到python官网 https://www.python.org 查找最新的原码,我使用的,Python-3.6.32、mkdir /h
- 1、python多进程编程背景python中的多进程最大的好处就是充分利用多核cpu的资源,不像python中的多线程,受制于GIL的限制,
- 前言我们今天的任务很明确,我先系统梳理一下:1.先用Python爬取一波漂亮的美女照片;2.然后Python中炫酷的代码实现;3.最后用ma
- 一行命令搭建一个基于python的http文件传输服务由于今天朋友想要一个文件,而我恰好有,因为这个文件比较大,网速不是很给力,所以想到了p