element ui前端排序，某列有数据为空值时，排序错乱问题

最新推荐文章于 2023-04-25 17:55:26 发布
最新推荐文章于 2023-04-25 17:55:26 发布
阅读量1.8k 收藏 8
点赞数 5
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43367044/article/details/106782425
版权

表格排序列的数据出现空值时，组件自带的排序功能不正常。而后查找了相关解决方法，有一网友给了我启示，解决了问题，现在照着思路写下步骤，日后再次遇到方便查找

在这里插入图片描述

解决方式是重新定义一个新数组：遍历表格数据data，使其含空的数据堆在一块，非空的数据放在一块，新数组给表格data重新赋值， 然后记录排序规则。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
排序后的结果：
在这里插入图片描述在这里插入图片描述

雷雷叫她菜青蟲
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python实现删除某列中含有空值的行的示例代码
09-16
### Python 实现删除某列中含有空值的行的示例代码 在数据分析过程中，经常会遇到包含缺失值的数据集。处理这些缺失值对于确保分析结果的准确性和有效性至关重要。本篇文章将详细介绍如何使用Python中的Pandas库来...
element-ui表格sort-change排序，当table部分数据为空null时，解决排序不起作用/错乱/不整齐的问题（支持字符串，数字排序）
u013265669的博客
03-18 8799
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
关于使用elementUI table自定义排序无法处理空值问题的解决方案
_wanshuang_
04-25 732
关于使用elementUI table自定义排序无法处理空值问题的解决方案
elementui 表格排序在数据为空的情况下出现bug，已解决
q879936814的博客
10-13 1479
客户需求：给排班的人排序，没有的放到下面。 解决方法：先按照elementui文档上操作，加上sortable，发现目标列如果两行之间有空的情况，排序就失效了。只能通过自定义排序来完成 代码： //html <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="widt
elementUI的table的排序结果不正确问题
weixin_45613604的博客
06-20 4673
做项目时发现使用elementUI的table的sortable排序结果不正确 可以加个sort-method事件 <el-table-column sortable :sort-method="(a,b)=>{return a.lawsuit - b.lawsuit}" prop="lawsuit" label="金额" show-overflow-tooltip></el-table-column> ...
element表格排序（带有数值、字符串）解决排序错乱
honeymoon_的博客
11-23 4103
问题描述 element表格中的数据有两种形式：数值、字符串。element自带排序方法会发生排序错乱。如图：没有金额时，展示 --，图中升序排序错乱。 解决步骤 1. 在el-tabel中添加 @sort-change="handleSort" <el-table :data="tableData" class="my-table" @sort-change="handleSort" > </el-table> 2. methods中添加方法 方法中de
JSP 前端数据本地排序实例代码
01-20
因此，在处理大量数据时，通常会结合后端处理来优化性能。此外，为了提供更好的可访问性和用户体验，还可以考虑使用现代JavaScript库如React或Vue，它们提供了更高效的数据绑定和渲染机制，可以更轻松地实现复杂的...
pymongo实现多结果进行多列排序的方法
09-22
特别是当需要根据多个字段对数据进行排序时，掌握正确的技巧尤为重要。本文将详细介绍如何使用`pymongo`实现多结果进行多列排序的方法，并深入探讨其中涉及的Python排序技巧。 #### 一、pymongo简介 `pymongo`是...
SqlServer 基础知识 数据检索、查询排序语句
09-11
在SQL Server中，数据检索和查询排序是数据库操作的基础，对于任何数据库管理员或者开发者来说，理解和熟练掌握这些技能至关重要。以下是一些关于SQL Server中数据检索和查询排序的知识点： 1. **数据检索**：基本...
element中表格排序空值问题
weixin_50316900的博客
04-10 2026
解决element自定义排序空值问题 一、先添加属性代码 先给html需要排序列中加上 :sortable=“true” <el-table-column prop="last_time" align="center" min-width="10%" label="最后跟进时间" :sortable="true" show-overflow-tooltip> 1，为el-tabel添加属性 :default-sort 为表格列添加默认的排序列和排列顺序 :default-sort=
element ui table组件自带排序功能，排序不正确问题解决
m0_53101857的博客
10-29 9664
<el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="item.props" :label="item.label" sortable :sort-method="(a, b) => {return a[item.props] - b[item.props]}"> </el-table-column> 因为数据格式问题,table组件自带的排序可能...
Vue ElementUI框架中表格字段乱序问题
沐水莲心的博客
08-02 832
Vue ElementUI框架table组件中字段乱序的问题及解决
告别混乱排序，轻松解决 element 表格组件排序结果不正确问题
Shids_的博客
02-16 6478
告别混乱排序，轻松解决 element 表格组件排序结果不正确问题
element-ui表格列排序错乱问题解决方案
字母哥博客
02-11 3538
因为element-ui的排序默认是按照字母顺序排序的，首字母9和首字母8相比，倒序排序首先是9。首字母优先排序，不会考虑到后面小数点的问题。如果我们希望按照数字的大小排序，需要我们自定义。
element-ui表格使用前台排序，当table部分数据为空null时，解决排序不起作用、排序错乱和排序不整齐的问题
坚定的其其
01-07 8835
当表格排序列的数据出现空数据（null）的时候，组件自带的排序功能就无法正常了，出现的问题如图： 图1为升序状态，点击排序后完全无效 我的思路是重新排一个新数组：遍历表格data，使其含空的数据堆在一块，非空的数据放在一块，新数组给表格data重新赋值， 然后记录排序规则，代码附上： html部分： data部分只看标红色的就可以了： methods部分： 这里示范的是日期排序 ，如遇...
前端处理数组上移下移功能
m0_59910554的博客
08-19 383
处理数组排序问题前端js进行处理
使用Element开发页面表格排序问题：排序时带上了null值（直接展示后端返回排好的数据）
weixin_38423249的博客
11-29 1460
使用Element开发页面表格时，对某个字段做排序，并且对值为null的不做排序，放在最后。点击升序时，遇到个问题：后端返回的数据已经做了排序，前端拿到数据展示时把数据再排了一遍，我们要的结果直接拿后端排好序的数据使用。 问题如下： 代码如下： <--!表格排序字段--> <el-table-column sortable :sort-orders="['...
vue 前端处理列表 上下移动 操作
Yoga99的博客
09-23 1371
第一条不可上移，最后一条不可下移 <el-table-column label="操作" width="150"> <template slot-scope="scope"> <span @click="handleCellEdit(scope.row, scope.$index)" class="ce.
elementui表格点击箭头进行后台排序
weixin_46821224的博客
11-21 1583
近期做项目是后台管理系统,遇到表格点击箭头进行后台排序,如下图 首先需要在要排序的字段加上 sortable="custom"和 prop必须加prop否则不生效 <el-table-column :show-overflow-tooltip="true" fixed width="120px" prop="createTime" label="费用发生时间"
element-ui的table含空列数据排序
最新发布
07-04
Element-UI中的Table组件是一个功能强大的表格插件，支持丰富的数据展示和交互。如果想要处理包含空列（即列宽为0或没有数据显示）的数据并进行排序，需要注意一些细节。 首先，在配置表头时，对于那些不需要排序的空列，你可以设置`sortable`属性为`false`，例如： ```html <el-table-column type="index" label="#" width="50" :sortable="false"></el-table-column> ``` 然后，在数据渲染中，即使某些行的对应值为空，你也可以正常地返回`undefined`或者其他标记空的值，因为El-Table会默认空值在排序时被放在最后。如果你希望特定的空值被特别处理，比如始终排在最前面，可以在排序函数里添加判断条件。 如果你想自定义排序规则，可以提供一个`sortMethod`属性，这个方法接收当前列的字段名、两个值以及它们的原始顺序作为参数，根据业务需求编写合适的比较逻辑。例如： ```javascript <el-table-column prop="yourColumn" label="标题" sortable sort-method="customSortFn"> </el-table-column> methods: { customSortFn(field, a, b) { if (a[field] === undefined && b[field] === undefined) { return 0; // 如果都是空值，则保持不变 } else if (a[field] === undefined) { return 1; // 空值排在非空值后 } else if (b[field] === undefined) { return -1; } else { // 正常排序逻辑 } }, } ``` 总之，处理Element-UI Table中的空列排序，关键在于配置表头的可排序性、数据渲染的处理以及自定义排序方法，根据实际业务场景调整相应的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值