Vue-----table 控件自动勾选全选框2 与tab控件组合使用

页面区别：

代码：

// 标签页的切换
tabClick(tab, event) {//获取tabs页的索引this.tabIndex=tab.indexthis.getEffectByProjectId()
},//查询该项目组已配置特效（后端配置token拦截）并对表格进行默认勾选getEffectByProjectId() {getEffectByToken(this.selectProjectId).then((res) => {switch (res.code) {case '0000':this.multipleSelection = res.data.resultconsole.log('项目组已配置特效', this.multipleSelection)//设置表格默认勾选this.$nextTick(function() {this.toggle(this.multipleSelection)   //建议包装成方法这样扩展性更强})breakcase '1111':showMessage('warning', '本地没有特效，请上传特效')break}})},//每一个tab页下一个表格//双向绑定table选择框toggle(arr) {var vm=thisarr.forEach(item => {  vm.$refs.multipleSelections[vm.tabIndex].toggleRowSelection(item,true);})

//---------------改动前---------------
//双向绑定table选择框
toggle (arr) {arr.forEach(item => {this.$refs.multipleSelectionsssss.toggleRowSelection(item,true);});
},//---------------改动后---------------//每一个tab页下一个表格//双向绑定table选择框toggle(arr) {var vm=thisarr.forEach(item => {  vm.$refs.multipleSelections[vm.tabIndex].toggleRowSelection(item,true);})// 标签页的切换tabClick(tab, event) {//获取tabs页的索引this.tabIndex=tab.indexthis.getEffectByProjectId()},

原理：在没有使用tab页时，只有一个表格，就是multipleSelections，但是加上tab页后，ref形成了数组的形式，一个tab页有一个表格的ref。所以在toggle方法绑定的时候要区别好绑定到那个tab页上。

注意事项：

1.如果要获取绑定的数据

存在的问题：数据在渲染勾选的时候，点击下面的分页按钮后进行分页查询时（分页查询时会再一次执行已绑定的数据（并foreach循环进行绑定））重新查看自己table表绑定的数据，发现重复了很多组数据，

2.当table分页，勾选数据不显示

如果表格是分页的话，当页的数据不展示，但是点击其他页后再返回时数据又回显出来了

解决方法：

把表格的数据data置为空数组，等到要回显之前也就是在nextTick里面）再给表格的data赋值回去，然后再执行回显的操作。

//table数据为空
this.projectEffect=[]
//设置表格默认勾选
this.$nextTick(function() {//重新绑定table数据this.projectEffect = this.tmpProjectEffectthis.toggle(this.multipleSelection)   //建议包装成方法这样扩展性更强
})

Vue-----table 控件自动勾选全选框2 与tab控件组合使用相关推荐

vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 效果:如红框中部分. 一选全选:表头上的单选框选中则下面每行都选中. 全选一选:表中数据每行都 ...
vue 带全选和多选的表格怎么写_vue实现下拉列表多选全选以及模糊查询的vue组件...
vue实现下拉列表多选全选以及模糊查询的vue组件发布时间:2018-09-12 17:41, 浏览次数:3776 , 标签: vue <>前端,有时有这样的需求,需要一个下拉列表,还要 ...
vue实现购物车简单的功能-单选全选总价计算、批量删除
vue实现购物车简单的功能-----单选全选总价计算.批量删除等观看了后盾人视频教学,视频里面对于全选和单选的功能没有讲全,于是自己研究了一下,前端小白,也是第一次写博客,有什么不足和可以优化的地方 ...
layui checkbox 反选/全选/取消单个取消全选/全部选中勾上全选
更: 下面连接文章就是解决checkbox只能取到最后一个值的解决办法 https://blog.csdn.net/qq_16513911/article/details/81981733 <d ...
基于Vue和Element-UI自定义分组以及分组全选Select 选择器
文章目录基于Vue和Element-UI自定义分组以及分组全选Select 选择器在这里插入图片描述源代码基于Vue和Element-UI自定义分组以及分组全选Select 选择器上一篇博文 ...
JQuery全选反选随其他checkbox自动勾选全选反选
工作中的代码片段写出来留作以后对比参考网上没找到自己想要的全选反选代码干脆自己写了个比较臃肿的相信还有更加简单的方法 jquery代码 ============================ ...
gridControl控件的gridView实现全选
实现默认全选 1:设置GridControl控件允许选择多行 Run Designer ->Options->OptionsSelection->MultiSelect=true 2 ...
vue 实现el-select组件配合 el-tabs 完成动态tabs然后有勾选全选，还有模拟提交，回显数据
cv即可使用 <!DOCTYPE html> <!DOCTYPE html> <html lang="en"><head><m ...
html 遍历div内check,vue+element中checkbox 实现遍历分组全选
1.html部分 style="margin-left: 30px" :indeterminate="item.isIndeterminate" v-model ...

Vue-----table 控件自动勾选全选框2 与tab控件组合使用

注意事项：

Vue-----table 控件自动勾选全选框2 与tab控件组合使用相关推荐

最新文章

热门文章