el-table显示的数据顺序与接口返回的数据不一致

已于 2024-03-07 17:56:05 修改
阅读量837 收藏 8
点赞数 13
文章标签： vue elementui
于 2024-02-29 11:14:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hehong4698/article/details/136365815
版权

场景：蝴蝶项管中待我完成列表中有一个列显示的是优先级的颜色(priorityColor)，在触发排序时需要替换成优先级字段(taskPriority)排序。
这时候就出现了接口返回的数据与el-table中列表展示的数据不一致

列表显示的:
在这里插入图片描述
接口返回中的数据应该显示在最后的位置

在这里插入图片描述

原因就是没有使用远程排序，而是使用的列排序
在这里插入图片描述

所以要将sortable 改为sortable='custom’就解决了

hehong4698
关注
  • 13
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
Vue.js作为一款流行的前端框架，提供了丰富的组件库，如Element UI，它包含了一个名为`el-table`的数据表格组件。本篇文章将深入探讨如何在Vue.js项目中结合`el-table`和`file-saver`库，实现前端导出分页数据到...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
el-table自带排序，表格空值或无字段时排序结果混乱的解决办法
denglouhen的博客
03-29 3736
el-table自带sortable属性可以实现纯前端排序【当然表格有分页的话还是得靠后端排序】。然后在开发的过程中发现一个问题，就是当表格里要排序的某一列字段某些行是空值null或者后端没返回该字段为undefined【很常见的场景】，点击表头排序就会发现结果根本不准确。 那么解决办法就是自定义sortChange函数，自己实现对当前表格data进行排序。 1、首先在el-table标签上加上 @sort-change="sortChange" 2、实现sortChange函数： sort
el-table 加上排序之后 出现显示的数据与返回的数据的顺序不一致的问题
m0_61840359的博客
01-15 843
我的列表的列是循环的出来的 前面可以排序的都吗没有问题 就只有其中一个排序出现列表显示的顺序与后端返回的数据的顺序不一致。事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。之前的写法是这个样子的 很多循环出来的都是正常的 只有其中一个显示的顺序是错误的。虽然不知道为啥但是文档就是这样写的 哈哈哈哈哈 那就先这样吧。远程请求的时候 sortable 需要设置成 custom。，同时在 Table 上监听。如果需要后端排序，需将。然后代码改成这样就好了。
踩坑笔记：使用el-table的sortable时遇到的问题
m0_56635723的博客
05-10 519
默认按照字符串的方式进行排序，如果列的数据类型是字符串，但实际按数值或日期进行排序，可能会出现排序错乱。属性进行排序时，字符串进行排序是没有问题的，对日期进行排序时遇到了实际显示的排序与预期不符的情况。解决办法：自定义sort-method方法。在Element UI的。原因分析：数据格式问题，
iview table走后端排序,页面数据跟接口展示数据的顺序不一致问题
weixin_47239395的博客
10-19 1670
el-table有一个@sort-change方法是用来对表格进行全量排序的,把sortable:true就会出现排序按钮点击 这时候传一个调取后端接口的方法就好了,然后提交然后自测发现一个问题,后端接口已经排好的顺序，在前端展示的是数据另一个顺序 el-table-columns自身有一个排序方法 @sort-method，因为我们设置了sortable为true，所以他会在掉完el-table的方法之后 ，又调用@sort-method的方法又换了一次顺序sortable=“custom” 这个会禁止自
el-table用key解决表格数据显示不正确
陈怂怂的博客
03-08 4145
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
对象返回数据跟后端顺序不一致
weixin_45392204的博客
08-17 396
【代码】对象返回数据跟后端顺序不一致。
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
在Vue.js开发中，Element UI库的`el-table`组件是一个强大的数据展示工具，它可以适应各种复杂的场景。在这个特定的案例中，我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将...
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置问题，导致组件无法正常工作，比如在本案例中提到的“el-table不显示空白问题”。以下是对这个现象的深入分析及解决策略。 首先，让我们了解可能的...
vue2.0 + element UI 中 el-table 数据导出Excel的方法
08-27
Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法 以下是对 Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法的详细解释： 1. 安装相关依赖 在使用 Vue2.0 + Element UI 中 el-table 数据导出 ...
Element UI Table排序顺序错乱处理
weixin_42941628的博客
06-16 2239
【代码】Element UI Table排序顺序错乱处理。
记一次elementui时间线的实现
qq_41935885的博客
06-26 302
时间线展示更多数据
在HBuilder X中ElementUI框架的搭建
2301_77681226的博客
06-28 758
本文将详解基于Vue-cli脚手架搭建的项目如何使用ElementUI？所以在学习本篇文章内容之前建议先学习vue-cli脚手架项目的搭建和学习使用HbuilderX快速搭建vue-cil项目ElementUI框架:Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库Element UI 具有的显著特点：包含丰富的组件、易于定制、响应式设计、良好的文档和社区支持.
ElementUI框架搭建及组件使用
Dreamkidya的博客
06-29 388
当开始使用ElementUI框架来搭建网站或Web应用程序时，了解框架的基本结构和组件的使用是至关重要的。ElementUI是一个基于Vue.js的框架，提供了丰富的UI组件和工具，可以帮助开发人员快速构建现代化的用户界面。
elementUI的搭建使用过程
2301_77864799的博客
06-28 236
加载完成后即可使用elementUI网站中的组件,使用它们只需要复制组件下面的代码即可。复制这段代码到你的项目终端:npm i element-ui -S。上面是elementUI的网站,进入网站。点击右上角的组件按钮。
解决expand-change第一次展开无数据显示与实现
最新发布
盏茶作酒的博客
07-02 220
expand-change第一次展开无数据显示与实现。
el-table-column 接口排序实现
05-30
el-table-column 接口提供了 sort-method 属性，可以用来实现排序功能。sort-method 是一个函数，接收两个参数，分别是待比较的两个单元格的值，返回一个数字表示它们的大小关系，即： - 如果返回值小于 0，表示第一个值应该排在第二个值前面； - 如果返回值等于 0，表示两个值相等； - 如果返回值大于 0，表示第一个值应该排在第二个值后面。 以下是一个简单的示例： ```html <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="Name" sortable :sort-method="sortByName"></el-table-column> <el-table-column prop="age" label="Age" sortable></el-table-column> </el-table> ``` ```javascript export default { data() { return { tableData: [ { name: 'Alice', age: 20 }, { name: 'Bob', age: 25 }, { name: 'Charlie', age: 18 } ] }; }, methods: { sortByName(a, b) { return a.name.localeCompare(b.name); } } }; ``` 在上面的示例中，我们给第一个 el-table-column 添加了 sort-method 属性，并将其绑定到一个名为 sortByName 的方法上。这个方法使用 String.prototype.localeCompare() 方法来比较两个字符串的大小关系，从而实现按照姓名排序的功能。第二个 el-table-column 没有指定 sort-method 属性，因此默认按照数字大小排序。 需要注意的是，sort-method 只能用于排序，而不能用于筛选。如果需要筛选功能，可以使用 el-table-column 的 filters 属性配合 filter-method 实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hehong4698

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值