iview table 默认排序字段不高亮解决办法

iview treeSelect 组件封装

    • 1、表格增加排序时触发的方法
    • 2、定义三个变量,sortColumnDefaultStyle存放默认的样式,定义页面默认的列以及顺序
    • 3、显示的列加上 sortable, 和样式
    • 4、使用下面这块代表默认选中
    • 5、点击时清除掉默认的排序
    • 6、把排序的字段查询时传给后端

1、表格增加排序时触发的方法

在这里插入图片描述

Table(:columns='columns':data='tableData'@on-sort-change="sortChange")

2、定义三个变量,sortColumnDefaultStyle存放默认的样式,定义页面默认的列以及顺序

在这里插入图片描述

// 默认样式sortColumnDefaultStyle: null,// 排序的列columnSorting: 'dialing_time',// 正序或者倒叙sortingRules: 'desc',

3、显示的列加上 sortable, 和样式

在这里插入图片描述

 sortable: 'custom',className: 'sort-column',

4、使用下面这块代表默认选中

在这里插入图片描述

mounted () {this.$nextTick(() => {// 获取到节点并添加一个元素on, on表示选中的样式this.sortColumnDefaultStyle = document.getElementsByClassName('sort-column')[0].getElementsByClassName('ivu-table-cell')[0].getElementsByClassName('ivu-table-sort')[0].getElementsByClassName('ivu-icon ivu-icon-arrow-down-b')[0]this.sortColumnDefaultStyle.classList.add('on')console.log('sortColumnDefaultStyle', this.sortColumnDefaultStyle)})},

5、点击时清除掉默认的排序

在这里插入图片描述

// column:当前列数据// key:排序依据的指标// order:排序的顺序,值为 asc 或 descsortChange (e) {let key = e.keyconst order = e.orderif (key === 'dialingTime') {key = 'dialing_time'} else if (key === 'timeCons') {key = 'time_cons'}this.columnSorting = keythis.sortingRules = orderif (this.sortingRules === 'normal') {this.columnSorting = nullthis.sortingRules = null}// 点击排序之后清除默认设置的高亮排序if (this.sortColumnDefaultStyle) {this.sortColumnDefaultStyle.classList.remove('on')this.sortColumnDefaultStyle = null}this.query()},

6、把排序的字段查询时传给后端

在这里插入图片描述

orderBy: this.columnSorting,
order: this.sortingRules

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

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

相关文章

【LeetCode刷题-回溯】-- 47.全排列II

47.全排列II 主要需要解决全排列不重复的问题,设定一个规则,保证在填第i个数的时候重复数字只会被填入一次即可,而在本题中,我们选择对原数组排序,保证相同的数字都相邻,然后每次填入的数一定是这个数所在重…

综合运用DML、DDL、DCL、TCL语句与事务管理

文章目录 一、介绍二、DML:数据操纵语言三、DDL:数据定义语言四、DCL:数据控制语言五、TCL:事务控制语言六、SELECT 查询时锁定 一、介绍 在Oracle数据库中,掌握和运用DML、DDL、DCL和TCL语句是必不可少的技能。 这些…

【算法】经典算法题

文章目录 专题一:双指针1. 移动零2. 复写零3. 快乐数4. 盛最多水的容器5. 有效三角形的个数6. 查找总价格为目标值的两个商品7. 三数之和8. 四数之和 专题二:滑动窗口1. 长度最小的子数组2. 无重复字符的最长字串3. 最大连续1的个数 III4. 将 x 减到 0 的…

云原生技术演进之路-(云技术如何一步步演进的,云原生解决了什么问题?)

云技术如何一步步演进的? 云原生解决了什么问题? 物理设备 电脑刚被发明的时候,还没有网络,每个电脑(PC),就是一个单机。 这台单机,包括CPU、内存、硬盘、显卡等硬件。用户在单机…

电线电缆、漆包线工厂开源MES/生产管理系统/云MES

万界星空科技专业的漆包线MES系统功能介绍: 从原材料出入库-拉丝机等设备管理-漆包线称重打印系统自动入库(支持多台秤同时称重)-建立销售报价、销售订单-生产订单-支持扫码出库及自动拣货出库-应收应付账款-对接各种其他系统及财务系统。 …

便携式水污染物监测设备的招标参数有哪些

便携式多参数水质检测仪参数特点: 便携式多参数水质检测仪参数特点: 便携式多参数水质快速测定仪,根据国家检测标准(G B ) 及环境部检测标准(H J )研发生产,本仪器具有检测快速、操作简单、测试…

python3实现类似expect shell的交互式与SFTP的脚本

前面写过一篇关于python实现类似expect shell的交互式能力的文章,现在补全一下加上sftp的能力脚本。 例子在代码中__example()方法。 依赖paramiko库,所以需要执行pip install paramiko来安装。 import os import queue import re import threading im…

综合实力盘点高性价比还优质的云服务器:亚马逊云科技仍然领跑市场

如果说云计算是一条流向数字化未来的河流,那亚马逊云科技毫无疑问是航行在最前面的帆船;如果说云计算是一条通往数字化未来的铁轨,那亚马逊云科技就是行驶在最前面的高铁。接下来回首往昔,以史为镜,得出云服务器哪家便…

毛里塔尼亚市场开发攻略,收藏一篇就够了

毛里塔尼亚是非洲西北部的一个国家,也是中国长期援建的一个国家,也是一带一路上的国家。毛里塔尼亚生产生活资料依赖进口,长期依赖跟我们国家的贸易关系也是比较紧密的,今天就来给大家介绍一下毛里塔尼亚的市场开发公路。文章略长…

Python监控服务进程及自启动服务方法与实践

1. 需求概述 当我们在Windows Server环境中部署XX系统的实际应用中,往往会遇到一些运维管理的挑战。为了确保系统的持续稳定运行,特别是在服务程序因各种原因突然关闭的情况下,我们可以借助Python的强大生态系统来构建一个监控与自动重启的管…

分布式链路追踪入门篇-基础原理与快速应用

为什么需要链路追踪? 我们程序员在日常工作中,最常做事情之一就是修bug了。如果程序只是运行在单机上,我们最常用的方式就是在程序上打日志,然后程序运行的过程中将日志输出到文件上,然后我们根据日志去推断程序是哪一…

Comsol Multiphysics 6.2 for Mac建模仿真软件

COMSOL Multiphysics是一款多物理场仿真软件,旨在帮助工程师、科学家和研究人员解决各种复杂的工程和科学问题。该软件使用有限元分析方法,可以模拟和分析多个物理场的相互作用,包括结构力学、热传导、电磁场、流体力学和化学反应等。 COMSOL…

一些好用的前端小插件(转自知乎)

一些好用的前端小插件(2) 1. cropper.js Cropper.js 2.0 是一系列用于图像裁剪的 Web 组件。 官网地址:https://fengyuanchen.github.io/cropperjs/v2/zh/ 2. Vditor Vditor是一款浏览器端的 Markdown 编辑器,支持所见即所得、…

2024年度投资策略:AI大模型和半导体国产化加速

今天分享的是AI系列深度研究报告:《2024年度投资策略:AI大模型和半导体国产化加速》。 (报告出品方:东方证券) 报告共计:48页 前言: 行情回顾与未来展望 电子板块涨幅转正,信心逐渐回归。截至…

人人都会Blazor —— 3.3 参数

参数最常见的使用,目的是使组件可以接收动态数据。 声明参数 参数使用 [Parameter] 特性的公共 C# 属性进行定义。 在下面的示例中,内置引用类型 (System.String) 和用户定义的引用类型 (PanelBody) 作为组件参数进行传递。 PanelBody.cs: public class PanelBody {publ…

SQL注入漏洞发现和利用,以及SQL注入的防护

一、背景 SQL注入漏洞是一种常见的软件安全问题,它发生在应用程序的数据库层中。其核心原理是将用户输入的数据当做代码来执行,违反了“数据与代码分离”的原则。具体来说,攻击者通过构造恶意的SQL查询语句,使得应用程序在执行SQ…

Android NFC手机上实现卡模拟

1, 问:能否在AndroidNFC手机上实现卡模拟? 答:在技术上可行,但是,对一般开发人员来讲,目前看来仅仅是技术上可行。 2, 问:具体如何实现呢? 答&#xff1…

git的使用记录

GitHub是公有的远程仓库,Gitlab是私有的远程仓库。 git add file git commit -m "add file" git mv filea fileb git log 显示提交记录 git log --oneline 一行的简略信息显示 git log --oneline --decorate 显示当前指针 git reset --ha…

矩阵知识补充

正交矩阵 定义: 正交矩阵是一种满足 A T A E A^{T}AE ATAE的方阵 正交矩阵具有以下几个重要性质: A的逆等于A的转置,即 A − 1 A T A^{-1}A^{T} A−1AT**A的行列式的绝对值等于1,即 ∣ d e t ( A ) ∣ 1 |det(A)|1 ∣det(A)∣…

通用功能——git 攻略

摘要 本文主要介绍git常用命令的使用方法,同时介绍一些常见问题的处理方法,持续更新中… git命令通用选项 大多数git命令都适用的选项列表如下: -v, --verbose show hash and subject, give twice for upstream branch -q, --quie…