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

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

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

具体方法如下:

     //找到原来需要排序的数据在原来的数组中的位置
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. SpirngBoot整合MybatisPlus 附源码

    项目搭建 目录结构 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns ...

  2. Java-文件下载案例

    文件下载需求 1.页面显示超链接 2.点击超链接后弹出下载框 3.完成图片文件下载 分析 1.超链接指向的资源如果能够被浏览器解析,则在浏览器中展示,如果不能解析,则弹出下载提示框.不满足需求 2.任 ...

  3. 流式查询1. mybatis的游标Cursor,分页大数据查询

    流式查询流式查询 指的是查询成功后不是返回一个集合而是返回一个迭代器,应用可以通过迭代器每次取一条查询结果.流式查询的好处是能够降低内存使用.例如我们想要从数据库取 1000 万条记录而又没有足够的内 ...

  4. 编程好帮手:通义灵码(TONGYI Lingma),是阿里云出品的一款基于通义大模型的智能编码辅助工具

    通义灵码(TONGYI Lingma),是阿里云出品的一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写.自然语言生成代码.单元测试生成.代码注释生成.代码解释.研发智能问答.异常报错排查 ...

  5. 基于协同过滤技术的网上书城设计实现(源码+lw+部署文档+讲解等)

    \n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 社会发展日新月异,用计算机应用实现数据管理功能已经算是很完善的了,但是随着移动 ...

  6. [oeasy]python0085_[趣味拓展]字体样式_下划线_中划线_闪动效果_反相_取消效果

    字体样式 回忆上次内容 \033 xm 可以改变字体样式 0m - 10m 之间设置的 都是字体效果 0m 复原 1m 变亮 2m 变暗     ​   添加图片注释,不超过 140 字(可选)   ...

  7. CF30D King's Problem? 题解

    CF30D 题意 有 \(n+1\) 个点,其中的 \(n\) 个点在数轴上.求以点 \(k\) 为起点走过所有点的最短距离,允许重复. 思路 有两种情况: \(k\) 在数轴上(如图1). \(k\ ...

  8. python的基本认识

    python的基本认识 初识python: python是一种跨平台的.开源的.免费的.解释型的高级编程语言: python的应用领域十分广泛.如web编程.图像处理.黑客编程.网络爬虫和科学计算等: ...

  9. CFileViewer(文件浏览器)

    1 #pragma once 2 #include <afxwin.h> 3 #include <afxtempl.h> 4 5 class CFileViewer : pub ...

  10. vscode添加python文件头模板

    pycharm可以自动生成python的文件头模板,但是vscode目前还不可以(不支持python,c的似乎有插件支持了).琢磨了一下,可以通过用户代码片段来实现. 1. 什么是用户代码片段 参考文 ...