iview table实现选中一定个数后其他行被禁用

博客围绕Vue和iview-table展开,功能要求为表中数据最多选五条,选满五条后禁用未选中行。起初难以判断未选中行,后通过转为json对象,利用Vue.$refs.table01.objData获取表格数据对象,其中包含_isChecked属性来解决问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

iview中table组件实现选中一定行数后其他行不可被选中

主要使用Vue.$refs.table01.objData

功能要求:表中的数据最多只能选择其中的五条,当选中五条后其他没有被选中的行禁用

开始不能判断哪一行没有被选中,后来各种查找找到了方法this.$refs.table01.objData (转为json对象)可以获取表格中的数据对象且其中有 _isChecked 属性.

上代码--------------------------------------------------------

// 获取对象且转为可读取可改变的json对象
					let data01=JSON.parse(JSON.stringify(this.$refs.table01.objData));
					//因为使用了分页且设置了pageSize每页显示条数所以可以根据这个循环判断
					for(let i=0;i<this.pageSize;i++){
						// 判断是否被选中
						if(!data01[i]._isChecked){
							// 没有被选中则将其中的禁用属性改为true
							data01[i]._isDisabled=true;
						}
					}
					// 最后在赋值给原对象
					//!!!!!!注意 这里一定要给  试了好久都是数据变了但是不渲染才发现是没有重新赋值
				this.$refs.table01.objData=data01;

完成!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值