vue中table实现真正的跨越全选

一、项目需求

1.最初产生

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

2.实现思路：

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

二、代码实现

第一步：去除项目本身的全选按钮，添加属于自己的【全选】按钮

第二步：隐藏el-table的全选按钮，定位自定义el-checkbox

// 样式代码 

第三步：监听数据，配合UI库规定方法或属性，实现感官全选

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

半选实现的思路：

• 未点击过全选：每次勾选数据即为半选；
• 勾选全选：监听未勾选的数据，只要存在未勾选数据，即为半选。

// 此处代码为单纯半选状态的处理  data(){ return { isIndeterminate: false, // 半选状态标识 } }, watch: { // 跨页选择 checkVal: { handler(newValue, old) { this.$nextTick(() => { if (newValue.length > 0) { if (this.totalNum != newValue.length) { if(!this.checkChangeAll) { this.isEnterpriseIndeterminate = true; // 在未勾选全选，手动操作时，再控制半选状态 } this.$refs.tableData.store.states.isAllSelected = false; } else { this.checkChangeAll = true; this.$refs.tableData.store.states.isAllSelected = true; } } else { this.$refs.tableData.clearSelection(); } }); }, }, // 监听未选中的数据变化，如果存在则全选数据不为全选 unmultipleSelection: { handler(newValue, old) { this.$nextTick(() => { this.isIndeterminate = newValue.length > 0; // 控制半选状态 }); }, }, }

四、总结

实现跨页全选，本质上仍然是前后端配合的，全选标识flag、勾选或未勾选pks、查询的参数searchParams

• 如果是全选的话，需要前后端配合，设置全选标识flag:true，传递全选情况下的查询条件:searchParams；
• 全选但取消勾选个别几项，设置全选标识flag: true，传递查询条件searchParams、取消勾选的pk值:pks；
• 若是正常勾选数据，进行数据操作，设置全选标识flag:false，选中勾选的pk值：pks。

到此这篇关于vue中table实现真正的跨越全选的文章就介绍到这了,更多相关vue table跨越全选内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！