项目实战二:关于element-ui前端框架自定义排序功能

2023-11-04

前言:近期,前端在开发的过程中,需要根据列表中字符串形式的数字进行升序或者降序排序,直接排序肯定是有问题的,这时就需要用到自定义排序的方式了,还有就是先将字符串的数字转化为Number类型的。

具体代码如下:

// 开启排序
<el-table-column
sortable
:sort-orders="['ascending','descending']"
</el-table-column>
// 在表头加上排序的方法
<el-table
@sort-change="onSortChange"
</el-table>
//具体的排序方法
onSortChange ({ prop, order }) {
  this.tableData.forEach((val) => {
  val[prop] = Number(val[prop])
  })
  this.tableData.sort(this.compare(prop, order))
},
compare (prop, order) {
  return function (obj1, obj2) {
  var value1 = obj1[prop]
  var value2 = obj2[prop]
  if (order === 'ascending') {
     return value2 - value1
     } else {
     return value1 - value2
     }
  }
},

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

项目实战二:关于element-ui前端框架自定义排序功能 的相关文章

  • 使用 jquery-chosen 插件更新 vuejs 模型值

    尝试使用jquery 选择 http harvesthq github io chosen 使用 vue 问题是这个插件隐藏了我应用的实际选择v model 所以当我选择一个值时 vue 不会将其识别为选择更改事件 并且模型值不会更新 当我
  • Nuxt JS 插件是否可以只运行一次?

    我有几个 VueX 操作 仅在服务器上运行 并从nuxtServerInit 它们向外部服务发出 HTTP 请求 这会减慢 TTFB 的速度 我想实现一个缓存插件 可以从 Redis 存储和检索值 目的是避免在每个请求的操作中发出 HTTP
  • 每次页面重新启动时,Firebase.auth().currentUser 都会变为 null

    我正在使用 firebase 身份验证与 vue 应用程序 每次登录用户后重新启动页面时 currentUser 都会变为 null firebase auth signInWithEmailAndPassword this email t
  • Vue模板-渲染HTML特殊字符代码

    如何在我的 Vue 模板中完全渲染 HTML 特殊字符代码 例如我有这个 JSON 数据 id post91 slug null title Breakfast 038 Tea 我怎样才能转换Breakfast 038 Tea to Bre
  • 如何更改 Vuetify 日历日期格式

    我正在尝试在以下 Vuetify 日历上启用输入事件 https github com vuetifyjs vuetify blob master packages docs src examples calendars complex e
  • 如何在 Nuxt 中点击链接下载文件?

    我遇到了一个边缘情况问题 如果用户浏览几条 Nuxt 路线 单击网站 徽标 这是一个锚标记返回主页 然后单击浏览器本机后退按钮 最后单击一个应该的链接要打开 pdf 它会重定向到我的 404 页面 如果用户在页面加载时单击 pdf 链接 它
  • Vue js按钮冻结dom

    我试图在按下按钮时切换包含加载动画的跨度 直到使用 v if 函数完成 但是当我按下按钮时 DOM 冻结并且 span 元素保持不变 直到函数调用结束 如何让 DOM 不冻结并显示加载图标 非阻塞按钮按下可能是一个解决方案 HTML
  • 将 Select2(多项选择)与 vue.js 结合使用

    我是 vue 新手 并遵循了他们的 自定义指令 http vuejs org examples select2 html http vuejs org examples select2 html 当仅选择一个项目时 此方法效果很好 但当您选
  • firestore 安全规则 request.auth.uid 不起作用

    Firestore 安全规则不起作用 帮我 无法读取用户 用户 ID 的文档数据 安全规则 service cloud firestore match databases database documents match users use
  • VueJS - 验证表单文件上传中的文件大小要求

    我正在使用 Bootstrap Vue 表单制作一个简单的表单 用户可以在其中上传文件 有没有办法验证使用 Vue 表单选择的文件的大小 我想阻止用户上传此类文件 我见过this https stackoverflow com questi
  • Asyncdata 与 Fetch 之间的区别

    获取数据和异步数据之间的确切区别是什么 官方文档是这么说的 异步数据 您可能想要获取数据并在服务器端呈现它 Nuxt js 添加 asyncData 方法 让您可以在之前处理异步操作 设置元件数据 异步数据每次在加载组件之前调用 仅适用于
  • VueJS - 访问已安装的存储数据

    我无法理解以下内容 我有一个store其中包含应用程序所需的变量 特别地 有一个globalCompanies哪些商店 globalCompanies current all currentName 在另一个组件中 我想执行以下操作 mou
  • 如何仅在某些页面上显示验证码图标(VUE reCAPTCHA-v3)?

    我使用这个包 https www npmjs com package vue recaptcha v3 https www npmjs com package vue recaptcha v3 我添加了我的 main js import V
  • Vue 3:使用渲染函数将所有项目包装在一个自定义组件中

    我正在尝试建立自己的sortable成分 我想将项目列表传递到它的默认插槽 然后 可排序组件应该用自定义包装所有传递的项目v draggable成分
  • 如何在 Atom 中启用 .vue 文件的语法突出显示?

    我开始使用 Vue js 我遇到的第一个问题是我的 IDE Atom 无法美化我的 vue 文件 这一切都只是白色的文字 如何让 Atom 正确突出显示 vue 文件 语言 vue https atom io packages langua
  • 如何同时模拟Pinia和vue-i18n?

    我正在使用 Vue 3 的 Composition API 如下所示 store ts import ref Ref from vue import defineStore from pinia export const useStore
  • Nuxt.js 多个资源的根路由和根级 slugs

    我正在使用 Nuxt 构建一个电子商务前端 我希望为尽可能多的资源提供根级 slugs 最重要的是目录路径和产品 URL 一个明显的方法是使用 Nuxt 文件结构进行路由创建 com category men Tshirt com cate
  • 有没有V型斗篷的反面?

    根据VueJS 文档 https v2 vuejs org v2 api v cloak v cloak 指令可用于隐藏未编译的 Mustache 绑定 直到 Vue 实例准备就绪 换句话说 我可以隐藏一个div或类似的东西 当 vue 准
  • Vue 3 Composition API 提供/注入在单文件组件中不起作用

    我正在使用 Composition API 在 VueJS 3 中创建一个库 我实现了提供 注入 如中所述docs https v3 vuejs org guide composition api provide inject html i
  • VueJS 中数据无法正确显示

    我的 VueJS 代码有一个小问题 在 输出 压缩的 GS1 数字链接 URI 部分中 When there is no result it should have nothing display like this I have remo

随机推荐

  • 写论文的开源免费神器汇总

    科研办公学习的开源免费神器汇总 一 公式 1 Mathtype 是一款专业的数学公式编辑工具 理科生专用的工具 mathtype公式编辑器能够帮助用户在各种文档中插入复杂的数学公式和符号 2 Mathpix Mathpix可以将图片 PDF
  • 非对称加密算法--RSA加密原理详解

    密码学是在编码与破译的斗争实践中逐步发展起来的 并随着先进科学技术的应用 已成为一门综合性的尖端技术科学 密码学发展史 在说RSA加密算法之前 先说下密码学的发展史 其实密码学的诞生 就是为了运用在战场 在公元前 战争之中出现了秘密书信 在
  • ETCD 简介 + 使用

    随着CoreOS和Kubernetes等项目在开源社区日益火热 它们项目中都用到的etcd组件作为一个高可用 强一致性的服务发现存储仓库 渐渐为开发人员所关注 在云计算时代 如何让服务快速透明地接入到计算集群中 如何让共享配置信息快速被集群
  • getPerspectiveTransform通过4对点确认透视变换矩阵的原理分析

    老猿Python博文目录 https blog csdn net LaoYuanPython 一 引言 图像透视变换 Perspective Transformation 的本质是将图像从一个几何平面投影到另一个几何平面 透视变换保证同一条
  • html禁止Input文本输入缓存的两种方法

    默认情况下大多数的浏览器都会缓存input输入框的值 当输入框获取焦点时缓存值就会出现 我们只能通过清除浏览器的缓存来清除输入框的缓存值 这里介绍两种去掉输入框缓存的方法 input 的属性autocomplete 默认为on 其含义代表是
  • matlab自带各种分类器的使用示例

    目前了解到的 MATLAB 中分类器有 K 近邻分类器 随机森林分类器 朴素贝叶斯 集成学习方法 鉴别分析分类器 支持向量机 现将其主要函数使用方法总结如下 更多细节需参考 MATLAB 帮助文件 设 训练样本 train data 矩阵
  • 二叉树的认识

    愚昧将使你达不到任何成果 并在失望和忧郁之中自暴自弃 达芬奇 目录 一 二叉树的概念 二 二叉树的特点 结构 三 三种特殊的二叉树 1 斜树 2 满二叉树 3 完全二叉树 四 二叉树的性质 五 二叉树的存储方式 1 顺序存储 2 链式存储
  • 【前端】Vue项目:旅游App-(2)TabBar:搭建TabBar、循环获取动态数据、相关工具封装

    文章目录 目标 代码与过程 静态html css 改成动态数据 效果 总代码 修改或新建的文件 tabbarData js tab bar vue load assets App vue 目标 有两种实现方式 把数据写死 静态 直接写在ht
  • DotNetZip知识系列:用来解压缩zip

    说明 这是 net平台可以使用的一个库 NuGet Gallery Package Downloads for DotNetZip 这是官方文档 About DotNetZip DotNetZip Documentation
  • 2022.03.06 mysql8拉链表-测试

    1 创建业务表并初始数据 drop table if exists mall user create table mall user uid bigint unsigned auto increment comment 用户唯一ID pri
  • shell快速迁移海量文件的两种方案

    最近遇到这样一个小需求 linux服务器上某个目录下有几百万个文件 导致各种操作不便 急需转移历史文件 保留90天 同时对转移到的目录下新建日期文件夹 按文件创建来存放文件 想到了两种解决方案 第一种直接按创建日期find 这样需检索整个目
  • 容器化部署dex适配openldap

    ldap LDAP 在OIDC流程中是用来做身份认证服务的 包括LDAP身份认证服务器 自己的第三方应用需要调用LDAP的客户端接口 用以访问LDAP服务器进行身份验证 作用 用户验证 用户管理 ldap它是用来做统一用户身份认证的 即 你
  • 电机磁链和反电势系数关系

    电机磁链和反电动势系数辨识 刚接触电机 不久 很容易就被绕晕了 磁链 空载相反电势幅值 电角频率 text 磁链 varphi frac text 空载相反电
  • img 显示response图片数据

    url http blog csdn net ykf69177 article details 8655881 url img src servlet IdentityServlet
  • 将分数阶工具箱FOMCON加入simulink中

    1 下载FOMCON toolbox压缩文件 网址为gitee下载地址 2 将下载的压缩文件放于安装matlab的文件夹 gt toolbox 并解压缩 3 添加路径 点击设置路径 添加文件夹 添加并包含子文件夹 点击保存 4 关闭matl
  • Linux基础命令-history历史记录

    Linux基础命令 alias设置别名 Linux学习中的博客 CSDN博客 文章目录 前言 一 history命令介绍 二 语法及参数 三 参考实例 总结 前言 在工作中 经常会需要多次重复某一个命令 或者需要查看之前执行过什么命令 那么
  • C/C++程序算法小练习--大整数减法

    大整数减法 include
  • 《软件测试》第10章 数据流测试

    本节是根据书籍 软件测试 Paul C Jorgensen著 中第十章的内容进行学习总结 更详尽的内容请查看作者原文 另在此也感谢原著作者的著文分享 本章主要内容如下
  • linux 安装jdk

    1 下载JDK jdk下载地址 http www oracle com technetwork java javase downloads jdk8 downloads 2133151 html 2 安装jdk 因为我安装的CentOS7
  • 项目实战二:关于element-ui前端框架自定义排序功能

    前言 近期 前端在开发的过程中 需要根据列表中字符串形式的数字进行升序或者降序排序 直接排序肯定是有问题的 这时就需要用到自定义排序的方式了 还有就是先将字符串的数字转化为Number类型的 具体代码如下 开启排序