今天在工作中遇到了要对多选数据进行排序的一个功能,在此学习记录一下。

实现效果:点击左边的向下或者向上排序的按钮实现数据的排序。

选择第二个向下排序,结果如下:

具体方法如下:

     //找到原来需要排序的数据在原来的数组中的位置
const index=$this.checkedCities.findIndex((item)=>{
return item==row;
});
//向上排序
if(isUp){
[$this.checkedCities[index],$this.checkedCities[index-1]]=[$this.checkedCities[index-1],$this.checkedCities[index]]
}else{
[$this.checkedCities[index],$this.checkedCities[index+1]]=[$this.checkedCities[index+1],$this.checkedCities[index]]
}

ES6中对数组的数据进行排序的更多相关文章

  1. ES6中的数组

    数组是js中很重要的数据类型,虽然在 ES5 中,关于数组的方法和属性很多.但为了更加简洁.高效的操作数组,ES6 中又在数组原型上和实例上新增了一些方法. 一.Array方法 1.1 Array.f ...

  2. B表中的pid对应A表中id,查询A表中数据,根据b表中对应a表中该id的数据数目排序

    B表中的pid对应A表中id,查询A表中数据,根据b表中对应a表中该id的数据数目排序 select a.*,count(*) as c from a left join b on a.id=b.ai ...

  3. ES6中对数组的扩展

    hello,大家好,我又来了.         前面讲了字符串和数值的扩展,今天要讲的是:数组的扩展.不知道大家能否跟得上这个节奏,你们在阅读中对讲解有存在疑惑,记得留言提出来,要真正地理解,否则白白 ...

  4. ES6中的数组方法扩展

    上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...

  5. ES6中的数组常用方法

    数组在JS中虽然没有函数地位那么高,但是也有着举足轻重的地位,下面我就结合这ES5中的一些常用的方法,与ES6中的一些方法做一些说明和实际用途.大家也可以关注我的微信公众号,蜗牛全栈. 一.ES5中数 ...

  6. C语言链表中数组实现数据选择排序,升序、降序功能主要难点

    链表排序讲解: head指针指向链表的头结点,是找到整个链表的唯一依据,如果head指针丢失,整个链表就找不到了. head存储的是第一个节点的地址,head->next存储的是第二个节点的地址 ...

  7. JAVA中运用数组的四种排序方法

    JAVA中在运用数组进行排序功能时,一般有四种方法:快速排序法.冒泡法.选择排序法.插入排序法. 快速排序法主要是运用了Arrays中的一个方法Arrays.sort()实现. 冒泡法是运用遍历数组进 ...

  8. AJPFX关于Java中运用数组的四种排序方法

    JAVA中在运用数组进行排序功能时,一般有四种方法:快速排序法.冒泡法.选择排序法.插入排序法.快速排序法主要是运用了Arrays中的一个方法Arrays.sort()实现.冒泡法是运用遍历数组进行比 ...

  9. Java基础知识强化12:Java中运用数组的四种排序方法

    1.使用JavaApi文档中的Arrays类中的sort()进行快速排序 首先我们直接看代码如下: package himi.text; import java.util.Arrays; public ...

  10. ES6中的数组reduce()方法详解

    reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行),将其结果汇总为单个返回值. 1. 语法reduce说明 arr.reduce(callback(accumu ...

随机推荐

  1. 基于防火墙的SSLVPN

    SCVPN即SSLVPN 拓补图 记得打开策略! 设置外接口(一些管理方式要打开) 设置SSL 地址池(如没要求设iP,随意设) 建立SSL VPN 出接口,地址池要选对 创建一个本地用户(账号A 密 ...

  2. Plugin 'org.springframework.boot:spring-boot-maven-plugin:'not found

    前言 在配置spring-boot的maven时,软件报错:Plugin 'org.springframework.boot:spring-boot-maven-plugin:'not found 在 ...

  3. 详解Web应用安全系列(10)文件上传漏洞

    文件上传漏洞(File Upload Vulnerabilities)是Web攻击中常见的一种安全漏洞,它允许攻击者上传并执行恶意文件,从而可能对Web服务器造成严重的安全威胁. 一.定义与原理 文件 ...

  4. MySQL派生表合并优化的原理和实现

    本文分享自华为云社区<[华为云MySQL技术专栏]MySQL 派生表合并优化的原理和实现>,作者:GaussDB 数据库. 引言 MySQL是一种流行的开源关系型数据库管理系统,广泛应用于 ...

  5. webpack4.15.1 学习笔记(三) — 模块热替换HMR

    目录 模块热替换 HMR HMR监听文件变化 HMR 修改样式表 模块热替换 HMR 允许在运行时更新各种模块,而无需进行完全刷新.不适用于生产环境,意味着应当只在开发环境使用.启用HMR实际上就是更 ...

  6. [oeasy]python0045_四种进制_binary_octal_decimal_hexadecimal

    四种进制 回忆上次内容 上次研究了 通过 八进制数值 转义 \ooo 把(ooo)8进制对应的ascii字符输出 转义序列 \n.\t 是 转义序列 \xhh 也是 转义序列 \ooo 还是 转义序列 ...

  7. [rCore学习笔记 09]为内核支持函数调用

    在[[08 内核第一条指令|上一节]]我们使用了编写entry.asm函数中编写了内核的第一条指令,但是我们使用的汇编.这里注意我们仍然是嵌入了这段asm代码到我们的rust代码之中,然后进行编译.但 ...

  8. MySQL 递归查询实践总结

    MySQL复杂查询使用实例 By:授客 QQ:1033553122   表结构设计 SELECT id, `name`, parent_id FROM `tb_testcase_suite` 说明: ...

  9. 微服务:openFeign

    openFeign是一个声明式http客户端.作用:基于springMVC常见注解,帮我们更优雅的实现http请求 引入依赖 <!--openFeign--> <dependency ...

  10. 关于druid与springboot版本问题

    datasource: druid: driver-class-name: ${sky.datasource.driver-class-name} url: jdbc:mysql://${sky.da ...