一、前言

我在vue项目中遇到了一个表格排序的需求,根据某一项的值的大小从大到小调整数组顺序。

二、代码

表格大概是这个样子,样式和图片在代码中简化了。


<table class="recommend_table" cellspacing="0">
<tr>
<th>股票</th>
<th @click="sort('in_price')">入选价</th>
<th @click="sort('now_price')">最新价</th>
<th @click="sort('increase')">模拟涨跌幅</th>
</tr>
<tr v-for="(item,index) in recommendlist" :key="index">
<td>
<div class="recommend_name">{{item.name}}</div>
<div class="recommend_num">{{item.bn}}</div>
</td>
<td>{{item.in_price}}</td>
<td>{{item.now_price}}</td>
<td>{{item.increase}}%</td>
</tr>
</table> <script type="text/ecmascript-6">
export default {
data(){
return{
recommendlist: [
{ name:'高科石化', bn:'002778', in_price: 20.68, now_price: 28.68, increase: 10.01 },
{ name:'中孚信息', bn:'300659', in_price: 19.46, now_price: 17.46, increase: 9.06 },
{ name:'永福股份', bn:'300712', in_price: 17.68, now_price: 32.68, increase: 2.01 }
],
sortType: 'in_price'
}
},
methods: {
sort(type) {
this.sortType = type;
this.recommendlist.sort(this.compare(type));
// switch(type){
// case 'in_price':
// this.sortType = 'in_price';
// this.recommendlist.sort(this.compare('in_price'));
// break;
// case 'now_price':
// this.sortType = 'now_price';
// this.recommendlist.sort(this.compare('now_price'));
// break;
// case 'increase':
// this.sortType = 'increase';
// this.recommendlist.sort(this.compare('increase'));
// break;
// }
},
compare(attr) {
return function(a,b){
var val1 = a[attr];
var val2 = b[attr];
return val2 - val1;
}
}
}
}
</script>

1. 排序方法

这里用到的是数组的sort方法,这个方法有一个需要注意的地方,就是不传参数的话,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。这并不是我们想要的排序方法,所以必须要传参。

sort方法的参数是一个函数,这个函数提供了一个比较方法,要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。

compare(key) {
return function(a,b){
var val1 = a[key];
var val2 = b[key];
return val2 - val1;
}
}

在代码中,compare函数中的匿名函数就是这样一个函数,但这个函数外面又嵌套了一层,这是因为需要根据数组中的某一项来排序,所以需要把这一项的key值传进来。

2. 调用排序方法


sort(type) {
this.sortType = type;
this.recommendlist.sort(this.compare(type)); // 注释部分
switch(type){
case 'in_price':
this.sortType = 'in_price';
this.recommendlist.sort(this.compare('in_price'));
break;
case 'now_price':
this.sortType = 'now_price';
this.recommendlist.sort(this.compare('now_price'));
break;
case 'increase':
this.sortType = 'increase';
this.recommendlist.sort(this.compare('increase'));
break;
} }

一开始我按照注释的部分写的,和我一样抽象能力不是特别好的人首先会想到要这样写,但是写出来之后发现三种情况不过是重复的代码,这时我就直接用最上面两行代码来代替,写完以后感觉内心一片平和。这种复用率高的代码简直让人太舒服了。

三、结语

虽然是一个简单的功能,但是非常值得归纳总结一下。

来源:https://segmentfault.com/a/1190000016199017

vue 根据数组中某一项的值进行排序的更多相关文章

  1. leetcode-26.删除重复数组中的重复项

    leetcode-26.删除重复数组中的重复项 题意 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数 ...

  2. Java实现 LeetCode 80 删除排序数组中的重复项 II(二)

    80. 删除排序数组中的重复项 II 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O ...

  3. 每天一道面试题LeetCode 80--删除排序数组中的重复项 II(python实现)

    LeetCode 80--删除排序数组中的重复项 II 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输 ...

  4. Vue 改变数组中对象的属性不重新渲染View的解决方案

    Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...

  5. [LeetCode] Remove Duplicates from Sorted Array 有序数组中去除重复项

    Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...

  6. Leetcode_删除排序数组中的重复项

    Leetcode  删除排序数组中的重复项 题目: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用 额外的数组空间,你必须在原地修改输入数 ...

  7. arts打卡 从排序数组中删除重复项

    Algorithm 从排序数组中删除重复项     给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组 ...

  8. [LeetCode] 80. Remove Duplicates from Sorted Array II ☆☆☆(从有序数组中删除重复项之二)

    https://leetcode.com/problems/remove-duplicates-from-sorted-array-ii/discuss/27976/3-6-easy-lines-C% ...

  9. [LeetCode] 26. Remove Duplicates from Sorted Array ☆(从有序数组中删除重复项)

    [LeetCode] Remove Duplicates from Sorted Array 有序数组中去除重复项 描述 Given a sorted array nums, remove the d ...

随机推荐

  1. typeof 、Object.prototype.toString和 instanceof

    数据类型 js 基本类型包括:Undefined  symbol null string boolean number js 引用类型包括:object array Date RegExp typeo ...

  2. MySQL模拟Oracle序列使用

    https://www.runoob.com/mysql/mysql-using-sequences.html   一篇笔记开始看 注意:创建序列表时一定要有 主键id自增,否则为只读状态不能修改递增 ...

  3. 2018-12-17-VisualStudio-使用新项目格式快速打出-Nuget-包

    title author date CreateTime categories VisualStudio 使用新项目格式快速打出 Nuget 包 lindexi 2018-12-17 14:11:50 ...

  4. Django项目:CRM(客户关系管理系统)--78--68PerfectCRM实现CRM业务流程(bpm)报名缴费分页

    # pagination.py # ————————68PerfectCRM实现CRM业务流程(bpm)报名缴费分页———————— from django.utils.safestring impo ...

  5. spring cloud深入学习(七)-----配置中心git示例

    随着线上项目变的日益庞大,每个项目都散落着各种配置文件,如果采用分布式的开发模式,需要的配置文件随着服务增加而不断增多.某一个基础服务信息变更,都会引起一系列的更新和重启,运维苦不堪言也容易出错.配置 ...

  6. xml文件节点读取时,selectNodes总是在根节点下查找的问题

    参考:https://yq.aliyun.com/articles/39543 SAXReader reader = new SAXReader();Document document = reade ...

  7. PHP基于openssl实现的非对称加密操作

    使用非对称加密主要是借助openssl的公钥和私钥,用公钥加密私钥解密,或者私钥加密公钥解密. 1.安装openssl和php的openssl扩展 2.生成私钥:openssl genrsa 用于生成 ...

  8. MATLAB---dir函数

    dir函数是最常用的转换路径的函数,可以获得指定文件夹下的所有子文件夹和文件,并存放在一个文件结构的数组中,这个数组各结构体内容如下: name    -- 文件名 date    -- 修改日期 b ...

  9. day18 8.jdbc中设置事务隔离级别

    设置数据库事务隔离级别特殊需求才有,后面很少用.因为数据库本身是事务隔离级别的,mysql的事务隔离级别是Repeatable read,可以解决脏读和不可重复读.不用设置,人家数据库是有事务隔离级别 ...

  10. Luogu P3254 圆桌问题(最大流)

    P3254 圆桌问题 题面 题目描述 假设有来自 \(m\) 个不同单位的代表参加一次国际会议.每个单位的代表数分别为 \(r_i (i =1,2,--,m)\) . 会议餐厅共有 \(n\) 张餐桌 ...