el-table调取后端接口排序 但是表格还自行排序一次的原因

最新推荐文章于 2024-05-10 15:08:25 发布
最新推荐文章于 2024-05-10 15:08:25 发布
阅读量570 收藏 6
点赞数 7
文章标签： javascript vue.js 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41867900/article/details/136194695
版权
文章讲述了在使用ElementUI中的el-table组件时，如何避免其内置排序功能与后端返回数据的顺序冲突，通过设置sortable属性为custom来确保数据的一致性。
摘要由CSDN通过智能技术生成

在某些业务场景当中需要调取后端的接口进行排序

<el-table
   :data="standardDatasets"
   border
   @sort-change="getStandardDatasets"
>
<el-table-column
  label="balabala"
   sortable
></el-table-column>
</el-table>

如果用上方的方法写的话 会发现展示的表格内容有可能和后端返回的顺序不一样 这是因为el-table自带的排序又进行了一次排序

<el-table
   :data="standardDatasets"
   border
   @sort-change="getStandardDatasets"
>
<el-table-column
  label="balabala"
   sortable="true"
></el-table-column>
</el-table>

如果改为sortable=“true” 或者 sortable="custom"就会解决这个问题

yggjdle
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-表格table部分字段前端请求接口后端排序
weixin_51746147的博客
10-27 288
1、2、
Element技能点--el-table 列排序自动变化问题
程序员大阳
12-24 6544
现象 使用了el-table组件后，想根据不同的条件显示不同的列，例如： <template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column v-if="type==1" prop="date" label="...
element-ui table sortable排序 掉后端接口方式
shi15926lei的博客
05-08 511
事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。，同时在 Table 上监听。3.定义排序字段,后端定义的。如果需要后端排序，需将。
el-table最多3列排序，调用后端接口
n_2021的博客
10-28 698
如下图，红色框内可同时进行排序，绿色框只能按某一列进行排序。红色框的排序条件与绿色框的排序条件可并存，即最多按3列排序。
Node-express项目--个人简历：login(登录)接口编写记录
2401_84437604的博客
04-28 664
/ 判断用户是否存在if (!user) {return res.status(400).json({ eamil: “用户不存在” })} else {// 判断密码是否正确res.status(200).json({ msg: “登录成功” })} else {return res.status(400).json({ password: “密码错误” })});})})测试：创建验证：在validation文件夹下新建login.js文件，用于验证登录。
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
在Vue.js开发中，Element UI库的`el-table`组件是一个强大的数据展示工具，它可以适应各种复杂的场景。在这个特定的案例中，我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将...
vue element table 表格请求后台排序的方法
12-29
1、ElementUi文档已经说了，如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 <el data=...
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树形表格表单验证(列表生成序号)
10-15
`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格时，验证表单和生成唯一的序号对于确保数据的准确性和一致性至关重要。 ### 一、树形列表生成序号 生成树形列表...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
首先，ElementUI的`el-table`组件通常通过`<el-table-column>`标签来定义每一列的属性，如`prop`、`label`和`width`等。例如，以下是一个静态的表格列定义： ```html <el-table :data="tableData" style="width: ...
el-table 加上排序之后 出现显示的数据与返回的数据的顺序不一致的问题
m0_61840359的博客
01-15 887
我的列表的列是循环的出来的 前面可以排序的都吗没有问题 就只有其中一个排序出现列表显示的顺序与后端返回的数据的顺序不一致。事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。之前的写法是这个样子的 很多循环出来的都是正常的 只有其中一个显示的顺序是错误的。虽然不知道为啥但是文档就是这样写的 哈哈哈哈哈 那就先这样吧。远程请求的时候 sortable 需要设置成 custom。，同时在 Table 上监听。如果需要后端排序，需将。然后代码改成这样就好了。
前端使用el-table自带排序功能\后端排序
m0_60594323的博客
04-21 671
前端排序调用后端
Element UI Table排序顺序错乱处理
weixin_42941628的博客
06-16 2292
【代码】Element UI Table排序顺序错乱处理。
Element Plus 表格后端排序
青春正在燃烧的博客
08-12 3853
element、element plus 表格tabel后端排序，取消默认空状态
踩坑笔记：使用el-table的sortable时遇到的问题
最新发布
m0_56635723的博客
05-10 676
默认按照字符串的方式进行排序，如果列的数据类型是字符串，但实际按数值或日期进行排序，可能会出现排序错乱。属性进行排序时，字符串进行排序是没有问题的，对日期进行排序时遇到了实际显示的排序与预期不符的情况。解决办法：自定义sort-method方法。在Element UI的。原因分析：数据格式问题，
element-ui表格列排序错乱问题解决方案
字母哥博客
02-11 3393
因为element-ui的排序默认是按照字母顺序排序的，首字母9和首字母8相比，倒序排序首先是9。首字母优先排序，不会考虑到后面小数点的问题。如果我们希望按照数字的大小排序，需要我们自定义。
VUE element-ui之table表格全局排序、调用后端接口排序功能
HanXiaoXi_yeal的博客
07-14 3102
步骤： 标签中定义排序方法： <el-table ref="reset" v-loading="loading" :data="tableData" height="520" border @sort-change="sortChange" > 要排序的字段定义排序关键字sortable ： <el-table-column prop="sumNum" label=
Element-Ui中table表格掉接口完成排序
小柠檬爱编程
06-01 1081
1：在el-table上加上这个方法@sort-change=“sortChange” 2：在想要排序的表头上加上sortable=“custom” 3：多看文档。多console.log就有你想要的 html： <el-table :data="tableData" size="mini" show-summary @sort-change="sortChange" ref="multipleTables" .
element-plus el-table el-table-column 根据后端返回数据动态生成
03-23
element-plus是一套基于Vue.js的UI组件库，提供了丰富的组件和功能，其中包括了el-table和el-table-column组件。 el-table是element-plus中的表格组件，用于展示数据。它可以根据后端返回的数据动态生成表格内容。你可以通过设置el-table的data属性来绑定后端返回的数据，然后el-table会根据数据自动生成表格的行和列。 el-table-column是el-table中的列组件，用于定义表格的列。你可以通过设置el-table的columns属性来配置表格的列，每个el-table-column代表一列。在el-table-column中，你可以设置prop属性来指定该列对应后端数据的字段名，label属性来设置列的标题，以及其他属性来定义列的样式和行为。 通过使用el-table和el-table-column组件，你可以方便地根据后端返回的数据动态生成表格，并且可以灵活地配置表格的列和样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值