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

记住文档的一句话：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>