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

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

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

具体方法如下:

     //找到原来需要排序的数据在原来的数组中的位置
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. 在VisualStudio中WPF应用程序在打开窗体界面设计时报错<发生了未经处理的异常>的解决方法

    在网上找了一个wpf的开源项目,在打开窗体,点击设计的时候,提示错误信息如下 System.Resources.MissingSatelliteAssemblyExceptionThe satelli ...

  2. mac idea 更换主题

    使用 主题一 xcode-dark-theme:点我直达 主题二 one-dark-theme:点我直达 主题三 dark-purple-theme:点我直达 主题四(推荐) vuesion-them ...

  3. 【Playwright+Python】系列教程(五)元素定位

    一.常见元素定位 定位器是 Playwright 自动等待和重试能力的核心部分.简而言之,定位器代表了一种随时在页面上查找元素的方法,以下是常用的内置定位器. 1.按角色定位 按显式和隐式可访问性属性 ...

  4. h5使用js拉起微信支付

    近期,业务需求对接了微信支付,做个总结.web网页想要拉起微信支付,有两种方法: H5下单支付 , JSAPI支付 .首先纯前端做不了微信支付,必须配合后端才能通过微信的下单请求.接下来说说这两种方法 ...

  5. CF-957(D-E)

    CF-957 赛时A去写全排列--前三题我的写法都挺丑的,后面改进了再更-- Problem - D - Codeforces 虽然是很简单很经典的线性dp,但也是我第一次自己把这种题写出来ヾ(≧▽≦ ...

  6. Swift开发基础01-语法

    Hello World print("Hello World") 不用编写main函数,Swift将全局范围内的首句可执行代码作为程序入口一句代码尾部可以省略分号(;),多句代码写 ...

  7. PAT-1002 写出这个数 (20分) JavaScript(node)

    读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 10100​​ . 输出格式: 在一行 ...

  8. .NET科普:.NET简史、.NET Standard以及C#和.NET Framework之间的关系

    最近在不少自媒体上看到有关.NET与C#的资讯与评价,感觉大家对.NET与C#还是不太了解,尤其是对2016年6月发布的跨平台.NET Core 1.0,更是知之甚少.在考虑一番之后,还是决定写点东西 ...

  9. AT_arc154_b 题解

    洛谷链接&Atcoder 链接 本篇题解为此题较简单做法及较少码量,并且码风优良,请放心阅读. 题目简述 给定两个长度为 \(n\) 的字符串 \(S,T\),定义一次操作可取出 \(S\) ...

  10. 关于写作那些事之快速上手Mermaid流程图

    本文主要介绍了如何快速上手 Mermaid 流程图,不用贴图上传也不用拖拉点拽绘制,基于源码实时渲染流程图,操作简单易上手,广泛被集成于主流编辑器,包括 markdown 写作环境. 通过本节内容你将 ...