8***@qq.com
8***@qq.com
  • 发布:2022-09-16 23:14
  • 更新:2022-09-16 23:14
  • 阅读:1087

关于动态取消checkbox选中状态代码实现~~~~~~

分类:uni-app

记住文档的一句话:checkbox的checked只做默认选中状态功能
业务逻辑是,在列表中选择学生,但是选中人数有限定,当选中事件触发后,判断当前选中人数是否超过限定人数,如果有,则将新选中的学生取消选中
核心逻辑是:
记录前几次选中的ID,找出最新选中的下标,然后将列表list清空,并根据前几次选中情况重新赋值新变量存数组,并将前几次选中的学生赋值为选中状态,在页面渲染完成后,在赋值给list
相当于对list的指针做了修改,达到页面同步更新的目的

<template>  
	<view class="cflex content">  
		<view class="w100 p25 cflex aifs w100 info-box jcsb">  
			<view>{{info.title}}</view>  
			<view class="rflex jcfs info-status">  
				<view>状态:{{info.statusName}}</view>  
				<view class="split">|</view>  
				<view>可投票:{{info.voteNum}}人</view>  
			</view>  
		</view>  
		  
		<view class="line"></view>  
		  
		<view class="p30 w100">  
			<checkbox-group @change="checkStudent">  
				<template v-for="item in list">  
					<label>  
						<view class="w100 score-item p30 cflex jcsa aifs" :key="item.studentId">  
							<view class="list-title rflex jcsb">  
								<text>{{item.studentName}}</text>  
								<checkbox :value="item.studentId.toString()" color="#fff" :checked="item.checked"/>  
							</view>  
							<view class="rflex aic w100">  
								<view>姓名:{{item.studentName}}</view>  
								<view class="split">|</view>  
								<view>性别:{{item.sexName}}</view>  
							</view>  
						</view>		  
					</label>  
				</template>  
			</checkbox-group>  
		</view>  
		  
		<view class="w100 cflex">  
			<view class="submit-btn cflex">  
				<text>继续学习</text>  
			</view>  
		</view>  
	</view>  
</template>  
  
<script>  
	import $cache from '@/common/js/cache.js';  
	import $studentTheory from '@/common/js/import/studentTheory.js';  
	export default {  
		onShow() {  
			let courseInfo = $cache.getCourseCache();  
			if (courseInfo) {  
				this.courseInfo = courseInfo;  
				let evaluationCache = $cache.getEvaluationCache();  
				if (evaluationCache) {  
					this.info = evaluationCache;  
					this.getDetail();  
				} else {  
					this.$common.backTips('未找到互评信息');  
				}  
			} else {  
				this.$common.backTips('未找到课程信息');  
			}  
		},  
		data() {  
			return {  
				info: {},  
				courseInfo: {},  
				list: [],  
				submitData: {  
					checkList: []  
				}  
			}  
		},  
		methods: {  
			getDetail() {  
				let statusConfig = {  
					1: '未开始',  
					2: '互评中',  
					3: '已结束'  
				};  
				this.$common.loading();  
				$studentTheory.evaluationDetail({courseEvaluationId: this.info.courseEvaluationId}, (res) => {  
					if (res.code == 200) {  
						res.data.statusName = statusConfig[res.data.status] != null ? statusConfig[res.data.status] : '';  
						this.info = Object.assign({}, this.info, res.data);  
						this.$common.getDict('sex', (dict) => {  
							$studentTheory.evaluationClassStudent({}, (res) => {  
								this.$common.loading(false);  
								if (res.code == 200) {  
									this.$each(res.data, (item) => {  
										item.checked = false;  
										item.sexName = dict[item.sex] ? dict[item.sex].dictValue : '';  
									});  
									this.list = res.data;  
								} else {  
									this.$common.backTips(res.msg);  
								}  
							});  
						});  
					} else {  
						this.$common.backTips(res.msg);  
					}  
				});  
			},  
			checkStudent(val) {  
				let valArr = val.detail.value;  
				//取出新增项下标  
				let addIndex = -1;  
				if (valArr.length > this.submitData.checkList.length) {  
					this.$each(valArr, (id, index) => {  
						if (!this.submitData.checkList.includes(id)) {  
							addIndex = index;  
							return false;  
						}  
					});  
				}  
				  
				let num = valArr.length;  
				if (num > this.info.voteNum) {  
					let lastIndex = valArr.length - 1;  
					valArr.splice(addIndex, 1); //删除新增项  
					this.$common.tips('最多只能选择 ' + this.info.voteNum + ' 人');  
					let tmpArr = Object.assign([], this.list);  
					this.$each(tmpArr, (item, index) => {  
						item.checked = false;  
						if (valArr.includes(item.studentId.toString())) {  
							item.checked = true;  
						}  
					});  
					this.list = [];  
					this.$nextTick(() => {  
						this.list = tmpArr;  
					});  
				}  
				this.submitData.checkList = valArr;  
			}  
		}  
	}  
</script>
0 关注 分享

要回复文章请先登录注册