element-ui table sortable排序 掉后端接口方式

实例:

官方解释:如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。

1.table上要加 @sort-change="sortChange"

2.每一列需要加上  sortable="custom" 不然不生效

3.定义排序字段,后端定义的

4.直接上方法

// 排序sortChange(column) {console.log(column,'column排序');for (const key in this.currentSort) {if (key.endsWith('Order') && key !== `${column.prop}Order`) {this.currentSort[key] = '';}}this.currentSort.orderType = column.order === 'ascending' ? 'asc' : 'desc';this.currentSort[`${column.prop}Order`] = column.prop;this.getList();},

5.最后调用接口list

async getList() {try {let params = {...this.bindParams, ...this.currentSort};this.$refs.tree.setCurrentKey(null);Object.keys(params).forEach(key => {if (params[key] === '') delete params[key];});this.$refs.tree.setCurrentKey(null);const res = await deviceRealList2(this.current, this.size, params)console.log(res, '新列表数据');this.tableData = res.data.data.recordsthis.total = res.data.data.total} catch (e) {console.log(e);}},

6.把接口换成自己的即可,代码可以直接复制就行,实现的单列排序,并不是全部.

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

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

相关文章

15_Scala面向对象编程_访问权限

文章目录 Scala访问权限1.同类中访问2.同包不同类访问3.不同包访问4.子类权限小结 Scala访问权限 知识点概念 private --同类访问private[包名] --包私有; 同类同包下访问protected --同类,或子类 //同包不能访问(default)(public)默认public --公…

Python | Leetcode Python题解之第78题子集

题目: 题解: class Solution:def subsets(self, nums: List[int]) -> List[List[int]]:self.res []self.backtrack([], 0, nums)return self.resdef backtrack(self, sol, index, nums):self.res.append(sol)for i in range(index, len(nums)):self…

物联网实战--平台篇之(四)账户后台交互

目录 一、交互逻辑 二、请求验证码 三、帐号注册 四、帐号/验证码登录 五、重置密码 本项目的交流QQ群:701889554 物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html 物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631…

P9422 [蓝桥杯 2023 国 B] 合并数列

P9422 [蓝桥杯 2023 国 B] 合并数列 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 用队列即可 当两个队列队首&#xff1a;a b &#xff0c;弹出 当a < b&#xff0c;把a加给其后一个元素&#xff0c;弹出a 当b < a&#xff0c;把b加给其后一个元素&#xff0c;弹出…

git 配置相关

问题一&#xff1a;ssh-keygen -t ed25519 -C "Gitee SSH Key" 这个命令中的 ed25519 字符是什么意思&#xff1f; ssh-keygen 是一个用于生成SSH密钥的工具&#xff0c;SSH&#xff08;Secure Shell&#xff09;是一种网络协议&#xff0c;用于加密方式远程登录和其…

Docker使用进阶篇

文章目录 1 前言2 使用Docker安装常用镜像示例2.1 Docker安装RabbitMQ2.2 Docker安装Nacos2.3 Docker安装xxl-job&#xff08;推荐该方式构建&#xff09;2.4 Docker安装redis2.5 Docker安装mysql 3 Docker自定义镜像3.1 Dockerfile的基本结构3.2 Dockerfile指令3.3 自定义JDK镜…

免费思维13招之三:赠品型思维

免费思维13招之三:赠品型思维 这节来学习一下免费模式中的三个子思维——赠品型思维、主副型思维和分级型思维。这三个思维有一个共同的名字又叫——产品型思维。 什么是产品型思维?顾名思义,就是在产品上的商业思维。也就是说,通过某一产品的免费来吸引客户,而后进行其…

redis--安装

简介 官网&#xff1a;RedisInsight - The Best Redis GUI 各个版本官网下载地址&#xff1a;http://download.redis.io/releases/ Redis和Memcached是非关系型数据库也称为NoSQL数据库&#xff0c;MySQL、Mariadb、SQL Server、PostgreSQL Oracle 数据库属于关系型数据 应用…

You don’t have permission.

The document “XXX” could not be saved. You don’t have permission. 1.查看修改了iOS系统库导致的, 根据提示, 进入到"XXX"文件中, 然后commandz回退/取消 2. Xcode 调试遇到的报错&#xff08;持续更新&#xff09;

C语言 函数的嵌套与递归 调用

本文 我们来说函数的嵌套调用和递归调用 在很多大型项目中 我们肯定不可能将所有逻辑都写在一个函数中 肯定要按功能拆解成多个特定的功能函数 函数并不允许嵌套调用&#xff0c;但是 允许在逻辑代码中嵌套调用 所谓函数嵌套调用 就是在一个函数中调用另一个函数&#xff0c;而…

计算机毕业设计Python+Spark知识图谱医生推荐系统 医生门诊预测系统 医生数据分析 医生可视化 医疗数据分析 医生爬虫 大数据毕业设计 机器学习

摘 要 随着我国社会经济发展水平的不断提高&#xff0c;人们的物质生活水平也有了很大的改善&#xff0c;越来越多的人不满足于当前的医疗服务质量&#xff0c;由于地域和空间的限制&#xff0c;医疗资源不平衡&#xff0c;无法实现全民共享。针对当今社会中存在的求医难的问题…

2024-05-08 问AI: 在深度学习中,介绍一下RMSProp 优化器

文心一言 在深度学习中&#xff0c;RMSProp&#xff08;Root Mean Square Propagation&#xff09;优化器是一种常用的优化算法&#xff0c;主要用于神经网络训练的梯度下降算法的变体。它是对Adagrad优化器的一种改进&#xff0c;旨在解决Adagrad中学习率过快下降的问题。 R…

Angular中的路由

Angular中的路由 文章目录 Angular中的路由前言一、创建路由二、创建多个组件路由三、创建子路由四、创建多个组件子路由 前言 在Angular中&#xff0c;路由是用于在不同的视图和组件之间导航的机制。Angular提供了一种强大的路由机制来管理单页应用&#xff08;SPA&#xff0…

SQL 基础 | JOIN 操作介绍

在SQL中&#xff0c;JOIN是一种强大的功能&#xff0c;用于将两个或多个表中的行结合起来&#xff0c;基于相关的列之间的关系。 JOIN操作通常用在SELECT语句中&#xff0c;以便从多个表中检索数据。 以下是几种基本的JOIN类型以及它们的用法&#xff1a; INNER JOIN&#xff1…

Jmeter 中 CSV 如何参数化测试数据并实现自动断言

当我们使用Jmeter工具进行接口测试&#xff0c;可利用CSV Data Set Config配置元件&#xff0c;对测试数据进行参数化&#xff0c;循环读取csv文档中每一行测试用例数据&#xff0c;来实现接口自动化。此种情况下&#xff0c;很多测试工程师只会人工地查看响应结果来判断用例是…

算法-排序

算法稳定性 什么是算法稳定性&#xff1b;假设KiKj&#xff08;1<i<n,1<j<n,i!j&#xff09;,且在排序前的序列中Ri领先Rj&#xff08;i<j&#xff09;。 如果排序后Ri依然领先Rj&#xff0c;则称所用的排序方法是稳定的&#xff1b;反之不稳定&#xff1b; …

Django Admin后台管理:高效开发与实践

title: Django Admin后台管理&#xff1a;高效开发与实践 date: 2024/5/8 14:24:15 updated: 2024/5/8 14:24:15 categories: 后端开发 tags: DjangoAdmin模型管理用户认证数据优化自定义扩展实战案例性能安全 第1章&#xff1a;Django Admin基础 1.1 Django Admin简介 Dj…

【线性代数】俗说矩阵听课笔记

基础解系的概念 31线性相关&#xff0c;线性无关&#xff0c;拓展与证明 n个m维向量在n<m时可能线性相关也可能线性无关&#xff0c;线性无关时可以构成某个m维空间的一组基。m不小于n时&#xff0c;秩小于n则线性相关。 n个m维向量在n>m时可一定线性相关。低维向量一定…

DEV--C++小游戏(吃星星(0.2))

目录 吃星星&#xff08;0.2&#xff09; 简介 分部代码 头文件&#xff08;增&#xff09; 命名空间变量&#xff08;增&#xff09; 副函数&#xff08;新&#xff0c;增&#xff09; 清屏函数 打印地图函数&#xff08;增&#xff09; 移动函数 选择颜色&#xff…

【初阶数据结构】栈

目录 栈的概念及结构栈的实现栈的结构栈的初始化栈的销毁入栈出栈取栈顶元素判断栈是否为空取栈中元素个数代码测试 完整代码Stack.hStack.ctest.c 栈的概念及结构 栈&#xff1a;是一种特殊的线性表&#xff0c;它只允许在固定的一端进行插入和删除元素的操作。   栈顶&…