博客
关于我
vue页面数组做数据置顶
阅读量:529 次
发布时间:2019-03-08

本文共 953 字,大约阅读时间需要 3 分钟。

//置顶    async stickHonor(index) {    //index为数据当前下标      let obj = this.honorList[index];      const id = obj.id;      obj.isStick = 1;      console.log(id);      const isStick = 1;   //置顶状态      const res = await stickStudentHonors({ id,isStick });  //调用接口改变数据状态      //删除之前的位置的数据      this.honorList.splice(index, 1);      //在数组下标为0插入数据,每次置顶数据都是在最前面      this.honorList.splice(0, 0, obj);    },    //取消置顶    async unstickHonor(index) {   //index为数据当前下标      let sum = 0;      for (let data of this.honorList) {        if (data.isStick == 1) {          sum++;        }      }      let obj = this.honorList[index];      const id = obj.id;      const isStick = 0;    //为不置顶      const res = await stickStudentHonors({ id,isStick });    //调用接口改变数据的状态      obj.isStick = 0;      //删除之前的位置的数据      this.honorList.splice(index, 1);      //置顶数据下面插入数据,因为sum把之前自己置顶的也算进去,所以sum-1      this.honorList.splice(sum-1, 0, obj);    }

   因为splice()方法为vue数组的响应式方法,所以会自动刷新数据

转载地址:http://ffviz.baihongyu.com/

你可能感兴趣的文章
mysql监控工具-PMM,让你更上一层楼(上)
查看>>
mysql监控工具-PMM,让你更上一层楼(下)
查看>>
MySQL相关命令
查看>>
mysql社工库搭建教程_社工库的搭建思路与代码实现
查看>>
Warning: Can't perform a React state update on an unmounted component. This is a no-
查看>>
mysql笔记 (早前的,很乱)
查看>>
MySQL笔记:InnoDB的锁机制
查看>>
mysql第一天~mysql基础【主要是DDL、DML、DQL语句,以及重点掌握存存引擎、查询(模糊查询)】
查看>>
mysql第二天~mysql基础【查询排序、分页查询、多表查询、数据备份与恢复等】
查看>>
MySQL简介和安装
查看>>
MySQL简单查询
查看>>
MySQL管理利器 MySQL Utilities 安装
查看>>
MySQL篇(管理工具)
查看>>
mysql类型转换函数convert与cast的用法
查看>>
mysql系列一
查看>>
MySQL系列之数据授权(安全)
查看>>
MySQL系列之数据类型(Date&Time)
查看>>
MySQL系列之数据类型(Date&Time)
查看>>
Mysql系列之锁机制
查看>>
Mysql系列九:使用zookeeper管理远程Mycat配置文件、Mycat监控、Mycat数据迁移(扩容)...
查看>>