标签：vue checkedDataList newArr 列表 item 点击 全选 选中 数据

前两天遇到一个问题，不过后来解决啦，在这里跟大家分享一下，话不多说，上案例（基于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;

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

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

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

标签：vue,checkedDataList,newArr,列表,item,点击,全选,选中,数据
来源： https://www.cnblogs.com/houBlogs/p/11138170.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。