博客
关于我
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学习总结(19)——Mysql无法创建外键的原因
查看>>
Mysql学习总结(1)——常用sql语句汇总
查看>>
Mysql学习总结(20)——MySQL数据库优化的最佳实践
查看>>
Mysql学习总结(21)——MySQL数据库常见面试题
查看>>
Mysql学习总结(22)——Mysql数据库中制作千万级测试表
查看>>
Mysql学习总结(23)——MySQL统计函数和分组查询
查看>>
Mysql学习总结(24)——MySQL多表查询合并结果和内连接查询
查看>>
Mysql学习总结(25)——MySQL外连接查询
查看>>
Mysql学习总结(26)——MySQL子查询
查看>>
Mysql学习总结(27)——Mysql数据库字符串函数
查看>>
Mysql学习总结(28)——MySQL建表规范与常见问题
查看>>
Mysql学习总结(29)——MySQL中CHAR和VARCHAR
查看>>
Mysql学习总结(2)——Mysql超详细Window安装教程
查看>>
Mysql学习总结(30)——MySQL 索引详解大全
查看>>
Mysql学习总结(31)——MySql使用建议,尽量避免这些问题
查看>>
Mysql学习总结(32)——MySQL分页技术详解
查看>>
Mysql学习总结(33)——阿里云centos配置MySQL主从复制
查看>>
Mysql学习总结(35)——Mysql两千万数据优化及迁移
查看>>
Mysql学习总结(36)——Mysql查询优化
查看>>
Mysql学习总结(37)——Mysql Limit 分页查询优化
查看>>