zoukankan      html  css  js  c++  java
  • vue 选中列表去重

    前两天遇到一个问题,不过后来解决啦,在这里跟大家分享一下,话不多说,上案例(基于vue + element)~~~

    需求:点击上方表格中的全选/选择,选中数据会显示在下方表格中;

    问题:会有重复显示数据

    解决办法:

      点击全选:会有重复数据所以我们要先去重,

              es6中有个去重方法:

              

     this.checkedDataList = Array.from(new Set(this.checkedDataList));
    

      

              因为上方表格是有分页功能的,所以这个方法可能不是很友好(具体场景:在第一页点击全选,再跳第二页点击全选,再回到第一页,数据就重复了);

              然后我又换了一种方法:

    const newArr = [];
    this.checkedDataList.map((item) => newArr.findIndex(({
     id
    }) => id === item.id) === -1 && newArr.push(item));
          this.checkedDataList = newArr;

             

             这个方法是我在网上找到的(如有侵犯请联系),就完美的解决了我的问题,不管分页如何跳转,下方数据始终不会重复。

       点击选择:也会有重复数据的

              这个就比较简单了,直接循环,看选中的数据中有没有一模一样的数据好啦,如果有的话就直接提示已经选择此条数据啦!

          

  • 相关阅读:
    Redis订阅和发布模式和Redis事务
    Redis介绍和环境安装
    Redis基本数据类型
    MongoDB导入导出以及数据库备份
    MongoDB-python的API手记
    MongoDB对应SQL语句
    判断是否微信浏览器访问并得到微信版本号
    windows 下编译php扩展库pecl里的扩展memcache
    用PHPExcel类读取excel文件的内容
    用excel.php类库导出excel文件
  • 原文地址:https://www.cnblogs.com/houBlogs/p/11138170.html
Copyright © 2011-2022 走看看