程序员经验分享-hwhale

el-table表格的sortable排序的使用以及出现小数、%排序错乱

2023-05-16

前端实现排序：

只需要在表头上加上一个sortable属性即可

        <el-table-column
          prop="unusualCount"
          label="异常数据总量"
          align="center"
          :show-overflow-tooltip="true"
          sortable
        />

问题1、当数据中出现小数，导致排序错乱

解决1、

        <el-table-column
          prop="dataRate"
          label="数据及时率"
          align="center"
          :sort-method="(a,b)=>{return a.dataRate - b.dataRate}"
          :show-overflow-tooltip="true"
          sortable
        >
        </el-table-column>

问题2、当数据需要使用%来显示，直接返回的数据含有%导致排序错乱，需要返回正常数字，在这里进行拼接%

解决2、

             <el-table-column
          prop="dataRate"
          label="数据及时率"
          align="center"
          :sort-method="(a,b)=>{return a.dataRate - b.dataRate}"
          :show-overflow-tooltip="true"
          sortable
        >
          <template slot-scope="scope">
            {{ scope.row.dataRate }}%
          </template>
        </el-table-column>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

table

Sortable

排序的使用以及出现小数

排序错乱

el-table表格的sortable排序的使用以及出现小数、%排序错乱 的相关文章

  • Ldap简单介绍（转）

    注 文章内容转载 觉得对ldap初次接触的你我非常的实用 关于LDAP的概念随便网上有很多 我不想重复 这里只是说一下我自己的 理解 都说它是 轻量级目录协议 太专业 我不懂 我只把它想象成 简单 的 目录协议 几个很重要的概念 以后会用到

  • 多表可更新视图的实现

    多表关联后的数据能保证主键唯一的视图是可直接做更新 不需要用触发器实现 多表视图的定义 当视图的数据源只有一张数据表 则该视图为单表视图 当视图的数据源是多张数据表 则该视图为多表视图 可更新视图的定义 在绝大多数人的概念中 视图是只读的

  • OpenGL错误总结

    const char getGLErrorInfo int errorId switch errorId case GL INVALID ENUM return GL Invalid Enum n case GL INVALID VALUE

  • 理解inode

    inode是一个重要概念 是理解Unix Linux文件系统和硬盘储存的基础 我觉得 理解inode 不仅有助于提高系统操作水平 还有助于体会Unix设计哲学 即如何把底层的复杂性抽象成一个简单概念 从而大大简化用户接口 下面就是我的ino

  • Hive doc

    https cwiki apache org confluence display Hive GettingStarted Table of Contents Hive introduction videos From Cloudera I

  • 51单片机学习笔记（二） 单个数码管显示1到9

    转自我的博客 http sincos in p 20 数码管 其实就是8个发光二极管按顺序排列而成的 所以让数码管显示特定的数字 只需要将该亮的二极管点亮 不该亮的灭了就好了 为了达到这个目的 就得参考电路图了 51HEI开发板的电路图在我

  • 数据控制类别（CC1和CC2）——DO-178B/ED-12B学习笔记之七

    数据控制类别 CC1和CC2 DO 178B ED 12B学习笔记之七 为了理解数据控制类别 CC1和CC2 的定义 先看DO 178B的7 3条 原文 Software life cycle data can be assigned to

  • DBA的一些职责

    1 DBA的一些职责 安装和升级数据库服务器 如Oracle Microsoft SQL server 以及应用程序工具 数据库设计系统存储方案 并制定未来的存储需求计划 一旦开发人员设计了一个应用 就需要DBA来创建数据库存储结构 tab

  • sql ntext數據類型字符替換

    ntext數據類型字符替換 2011 08 21 塗聚文 深圳大運會期間 政府貼出 溫馨提示 交通管制 世界之窗周邊不充許到陽台觀看 出入憑居住證不是身份證 create table tt sid INT IDENTITY 1 1 cont

  • 查询及删除重复记录

    查询及删除重复记录的方法大全 1 查找表中多余的重复记录 重复记录是根据单个字段 peopleId 来判断select from peoplewhere peopleId in select peopleId from people gro

  • 什么是inode

    2008 02 28skate 今天一个朋友去面试 考官问了他几个关于算法问题 还有一些概念 其中一个是什么是inode 1 inode 是作甚么的 一个 filesystem 可以粗略地分成 inode table 与 data area

  • Microsoft Jet SQL for Access 2000

    该系列的文章解释了什么是Microsoft Jet SQL 并说明了它如何在Access 2000的应用程序中使用 本文是基础 中级和高级三篇中的第二篇 这些文章循序渐进的说明了使用Jet SQL的语法和一些方法 并示范了对于Access

  • 存储过程进行数据合并导入

    CREATE PROCEDURE sp mytest1 mytype int AS declare pro varchar 50 declare pro1 varchar 50 select pro typename from table1

  • 如何获取使用某个table的所有存储过程

    select distinct object name id from syscomments where id in select object id from sys objects where type P and text like

  • 使用@Id时主键生成策略：TABLE、SEQUENCE、IDENTITY、AUTO

    主键生成策略 GenerationType TABLE GenerationType SEQUENCE GenerationType IDENTITY GenerationType AUTO TABLE 使用一个特定的数据库表格来保存主键

  • 创建索引分区

    Oracle学习四 创建 索引分区 作者 mckobe23 http mckobe23 itpub net 发表于 2007 03 13 18 30 分类 Oracle 出处 http mckobe23 itpub net post 291

  • ORA-14402: 更新分区关键字列将导致分区的更改

    默认情况下 oracle的分区表对于分区字段是不允许进行update操作的 如果有对分区字段行进update 就会报错 ORA 14402 更新分区关键字列将导致分区的更改 但是可以通过打开表的row movement属性来允许对分区字段的

  • LayUI table 刷新页面不重置页码

    layui table 刷新页面时会自动将页码初始化成1 本章内容介绍怎么让layui table刷新页面后留在当前页 要实现此方法主要使用到cookie存储最后一次翻页的页码 主要修改layui lay modules table js文

  • antd 中 Table表格 合并行

    1 首先获取所要合并行的column 去除每一行数据的rowkey 本例取的是Name这一列 2 当Name的值在多个页面出现时需重新记录rowSpan 3 合并column中具有相同Name的行 结果图如下 表格数据 const Data

  • jquery-ui sortable详解

    该插件的用途 使用鼠标重新排列列表或网格中的元素 helper 这个小伙子 总结的不错 Note In order to sort table rows the tbody must be made sortable not the tab

随机推荐

  • Android Android Studio 4.0 牛逼功能预览

    作者 xff1a wanbo 地址 xff1a https juejin im post 5db8cee351882557134d0411 新的 Android Studio 4 0 更换了全新的启动界面 xff0c 在今天 Google

  • Qt学习笔记之类继承关系图

  • C++：头文件递归包含问题（互相包含问题）

    目录 引言初始版本头文件守卫递归包含会怎么样为什么会出错前置声明是什么如何解决递归包含问题参考 引言 最近正在疯狂补技术债 xff0c 以及疯狂赶项目 大一大二摸的鱼终归是要还的 xff0c 也奉劝大家少摸鱼 xff0c 不然临近找工作可能

  • 拓展：示波器使用_波形分析

    这里主要对上一个练习中的波形图来拓展 xff0c 讲讲怎么在示波器输出的波形图中 xff0c 对该界面上的一些功能的使用 01 关于适应全屏 放大 缩小 对于输出波形 xff0c 经常要用到的即是适应屏幕 xff0c 以及放大缩小 xff0

  • 【已解决】element-ui组件嵌套太多层，导致内部el-input和el-select 等组件无法正常输入解决方案

    如果 element ui 组件嵌套太多层 xff0c 可能会导致内部的 el input 和 el select 等组件无法正常输入 出现这种问题通常是由于 z index 属性设置不正确导致的 解决这个问题的方法是调整组件的 z ind

  • 两个半天一刷Ubuntu入门指令

    目录 两个半天一刷Ubuntu入门指令 一 Ubuntu初次体验 二 设备驱动 三 Ubuntu用户组及其权限分配 四 压缩解压 五 Linux连接文件 六 vim编辑器 七 Linux下C编程 八 gcc和make及其Makefile的引

  • ENV环境配置及其下载网络组件包问题

    准备工作 Env 工具包含了 RT Thread 源代码开发编译环境和软件包管理系统 从 RT Thread 官网下载 Env 工具 在电脑上装好 git xff0c 软件包管理功能需要 git 的支持 git 的下载地址为https gi

  • 芯片flash保护（解锁）

    报错结果 Error while accessing a target resource The resource is perhaps notavailable 就是无法下载程序 解决办法 1 下载ST LINK Utility 链接 x

  • 2.RTT-点灯大师的修炼

    1 创建工程模板 相信大家通过学习上一篇文章 1 RTT 环境搭建 现在能熟练的创建一个标准模板了 xff0c 如果不会就跳回去学习一下吧 链接 xff1a 1 RTT 环境搭建 嵌入式路上的流浪的博客 CSDN博客 建立好的工程模板编译并

  • 4.RTT-UART-中断接收及轮询发送

    本期博客开始分享RTT的UART xff0c 利用战舰V3的uart2来输入输出一些字符串 UART xff08 Universal Asynchronous Receiver Transmitter xff09 通用异步收发传输器 xff

  • 12.RTT-IIC设备-AHT10温湿度传感器

    本系列博客更新结束啦 xff01 完结啦 xff01 xff01 xff01 撒花 xff01 xff01 xff01 关于RTT的设备和驱动专题更新完毕啦 xff0c 本期是最后一期 一段学习旅途的结束意味着下一段学习冒险的开始 虽然本系

  • RTduino+sht31温湿度传感器

    本次博客使用的是STM32F103C8T6 xff0c 因为该BSP已经对接好RTduino了可以直接上手使用 一 RTduino简介 RTduino是RT Thread实时操作系统的Arduino生态兼容层 xff0c 为RT Threa

  • 一文揭秘字节跳动、华为、京东的薪资职级

    声明 xff1a 本文所有数字均不是官方数据 xff0c 为网络资料收集整理 字节跳动 01 全球员工总数 字节的员工数量目前超过5万人 图片来源 xff1a 字节范 02 岗位职级 字节跳动的职级研发序列一共10级 xff1a 字节跳动创

  • ESP_C3在ubuntu下运行RT-Thread

    1 clone源代码RT Thread git clone git 64 github com RT Thread rt thread git 2 开始搭建ESP IDF环境 进入源码到bsp文件夹下找到ESP32 C3 xff0c 开始配

  • uniapp中使用弹出层

    uniapp中使用弹出层 因为业务的需要 xff0c 需要弹出一个复选框 xff0c 使用uniapp中自带的框架 使用 xff1a 第一步 xff1a 下载下示例项目 xff0c 找到主要的文件夹 第二步 xff1a 将该文件夹放到组件的

  • 手写一个uniapp的步骤条组件

    span class token operator lt span template span class token operator gt span span class token operator lt span view span

  • uniapp中的分页

    数据量过多就会使用分页 第一种 xff1a API span class token comment 和data同级 span span class token function variable function onReachBotto

  • uniapp中生成随机的二维码并进行保存

    需求 xff1a 需要根据用户id的不同生成不同的二维码 xff0c 并进行本地保存 第一步 xff1a 下载插件 这里对于二维码的生成 xff0c 使用的是第三方插件weapp qrcode min js xff0c 主要用到的文件是 d

  • Pc端的基本Echarts

    Pc端的基本Echarts 双环传态图组件 span class token operator lt span template span class token operator gt span span class token oper

  • el-table表格的sortable排序的使用以及出现小数、%排序错乱

    前端实现排序 xff1a 只需要在表头上加上一个sortable属性即可 span class token tag span class token tag span class token punctuation lt span el t

热门标签