Vue表格全选功能如何实现跨行全选操作？

本文共计1883个文字，预计阅读时间需要8分钟。

目录

一、项目需求

二、代码实现

三、代码实现全选按钮的状态

四、总结

一、项目需求

1.初次生产+运营测试时，提出跨页全选的要求；

2.感官上，页面上只须勾选上方的复选框。

目录

• 一、项目需求
• 二、代码实现
• 三、代码实现全选按钮的半选状态
• 四、总结

一、项目需求

1.最初产生

运营测试时，提出跨页全选的要求；感官上在页面中只要勾选上方的复选框，那么就要勾选所有的数据。需求大致描述如下：

2.实现思路：

2.1 翻找element-ui框架文档及网上的实现方式：全选勾选的本页的数据，只有翻页时才会勾选下一页的数据；当翻到非首页，勾选全选按钮，得到的效果也不会选中前面页面的数据等等。
2.2 框架本身的限制，全选并不会拿到所有的数据，另外考虑到数据过多的情况，前端传递所有选中id不太现实；那么就实现感官上的全选，只要点击全选，页面效果是数据。