在项目中表格的复选框勾选自动累计总分功能，以及 $set 的使用场景。

最新推荐文章于 2024-07-26 20:46:33 发布

innnil

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量270

点赞数 5

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_59180847/article/details/135930952

版权

以下是参考的页面图片：每组选项集已用颜色区分开，各对应各自的分数，总分是将这些选中的选项集进行累加，计算出总分。

  <tr style="letter-spacing: 1px;">
             <td style="width: 10%;text-align: center;">
                 <el-checkbox v-model="formRadio.nck9" @change="(val) => {
                        JSZF1(val, 0);
                                      }
                                        ">0分</el-checkbox>
                                </td>
                                <td>营养状况正常</td>
                                <td style="width: 10%;text-align: center;">
                                    <el-checkbox v-model="formRadio.nck13" @change="(val) => {
                                        JSZF2(val, 0);
                                    }
                                        ">0分</el-checkbox>
                                </td>
                                <td>营养需求正常</td>
                            </tr>
                            <tr style="letter-spacing: 1px;">
                                <td style="width: 10%;text-align: center;">
                                    <el-checkbox v-model="formRadio.nck10" @change="(val) => {
                                        JSZF1(val, 1);
                                    }
                                        ">1分</el-checkbox>
                                    <br>轻度
                                </td>
                                <td>3个月内体中丢失＞5%或前一周饮食是正常需求的50-70%</td>
                                <td style="width: 10%;text-align: center;">
                                    <el-checkbox v-model="formRadio.nck14" @change="(val) => {
                                        JSZF2(val, 1);
                                    }
                                        ">1分</el-checkbox>
                                    <br>轻度
                                </td>
                                <td>慢性疾病急性加重、慢性疾病有急性并发症、有肝硬化、骨折、慢性阻塞性肺疾病、血液透析患者、肿瘤、糖尿病、肝硬化</td>
                            </tr>
 
                            <tr style="letter-spacing: 1px;">
                                <td style="width: 10%;text-align: center;">
                                    <el-checkbox v-model="formRadio.nck11" @change="(val) => {
                                        JSZF1(val, 2);
                                    }
                                        ">2分</el-checkbox>
                                    <br>中度
                                </td>
                                <td>2个月内体中丢失>5% 或BMI18.5-20.5 同时一般状况差或前一周饮食是正常需求的25-60%</td>
                                <td style="width: 10%;text-align: center;">
                                    <el-checkbox v-model="formRadio.nck15" @change="(val) => {
                                        JSZF2(val, 2);
                                    }
                                        ">2分</el-checkbox>
                                    <br>中度
                                </td>
                                <td>比较大的腹部手术、中风、严重肺炎、恶性血液肿瘤</td>
                            </tr>
                            <tr style="letter-spacing: 1px;">
                                <td style="width: 10%;text-align: center;">
                                    <el-checkbox v-model="formRadio.nck12" @change="(val) => {
                                        JSZF1(val, 3);
                                    }
                                        ">3分</el-checkbox>
                                    <br>重度
                                </td>
                                <td>1个月内体中丢失＞5% 或BMI ＜18.5 同时一般状况差或前一周饮食是正常需求的0-25% 或血清白蛋白＜30g/L(无肝肾功能明显异常)</td>
                                <td style="width: 10%;text-align: center;">
                                    <el-checkbox v-model="formRadio.nck16" @change="(val) => {
                                        JSZF2(val, 3);
                                    }
                                        ">3分</el-checkbox>
                                    <br>重度
                                </td>
                                <td>脑损伤、骨髓移植、ICU 病人APACHE ＞10</td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <el-checkbox v-model="formRadio.nck17" @change="(val) => {
                                        JSZF3(val, 1);
                                    }
                                        ">年龄≥70 岁</el-checkbox>
                                    &emsp;&emsp;则加1分
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4">营养风险总分(
                                    <!-- {{ formInput.input3 + formInput.input4 + formInput.input5 }} -->
                                    <input class="medicalHistoryBlur" type="text" style="width: 2vw"
                                        v-model="formInput.input6" />
                                    )=营养受损分数
                                    <input class="medicalHistoryBlur" type="text" style="width: 2vw"
                                        v-model="formInput.input3" />
                                    +疾病分数
                                    <input class="medicalHistoryBlur" type="text" style="width: 2vw"
                                        v-model="formInput.input4" />
                                    +年龄分数
                                    <input class="medicalHistoryBlur" type="text" style="width: 2vw"
                                        v-model="formInput.input5" />
                                </td>
                            </tr>

以上是HTML的代码，当鼠标点击复选框的状态发生改变就会调用该自方法；

data() {
        return {
         
            formRadio: {},
            formInput: {
                input3: '',
                input4: '',
                input5: '',
                input6: '',
            },
          
            total1: 0,
            total2: 0,
            total3: 0,
 
        };
    },
 
    methods: {
        JSZF1(val, num) {
            if (val) {
                this.total1 = this.total1 + num;
            } else {
                this.total1 = this.total1 - num;
            }
            this.formInput.input3 = this.total1;
            var zf = Number(this.formInput.input3) + Number(this.formInput.input4) + 
            Number(this.formInput.input5)
            this.$set(this.formInput, "input6", zf)
        },
        JSZF2(val, num) {
            if (val) {
                this.total2 = this.total2 + num;
            } else {
                this.total2 = this.total2 - num;
            }
            this.formInput.input4 = this.total2;
            var zf = Number(this.formInput.input3) + Number(this.formInput.input4) + 
            Number(this.formInput.input5)
            this.$set(this.formInput, "input6", zf)
        },
        JSZF3(val, num) {
            if (val) {
                this.total3 = this.total3 + num;
                this.formInput.input5 = this.total3;
            } else {
                this.total3 = this.total3 - num;
                if (this.total3 == 0) this.formInput.input5 = '';
 
            }
 
            var zf = Number(this.formInput.input3) + Number(this.formInput.input4) + 
            Number(this.formInput.input5)
            this.$set(this.formInput, "input6", zf)
        },
        clear() {
            this.total1 = 0;
            this.total2 = 0;
            this.total3 = 0;
        },
  },

当然（JSZF）这个方法也可以使用一个就OK，各自的选项集可以给个不同的type也是可以的。上篇是使用jQuery的语法，这次使用的是v-model进行双向绑定，理解上也更容易；

（clear）这个方法是页面中有其他功能，比如说回显到该页面要进行修改选定项，要调用这个方法，相当于是赋初始值的意思，修改时勾选会重新进行累加，但是，input6，也就是最后的总分发现没有渲染出结果，这是出了什么问题？

这是因为 this.$set()是绑定在vue的.prototype原型上，vue是使用Object.defineProperty给对象做了一层拦截，当触发get时进行依赖收集，当触发set时触发依赖导致渲染函数执行重新渲染。第一次触发get是在首次加载页面渲染的时候触发，就会递归的将对象的属性都依赖收集。

**但是 Object.defineProperty()有个问题他是只会监听初始化的数据如果中途给数组或者对象添加新属性的时候 Object.defineProperty() 就不会监听到，不会监听到就没有数据劫持，没有数据劫持就没有双向绑定，没有双向绑定就没有数据变视图变**

如果我们就是想在程序运行的时候给vue的data中对象或者数组添加新属性并且让试图改变怎么办？

**$set() 就是在程序运行的时候给对象或者数组添加新属性并且让试图改变**

this.$set( target , key , value)

target: 要更改的数据源（可以是一个对象或者数组）

key 要更改的具体数据（索引）

value 重新赋的值

所以：在vue中，当你需要修改某个对象的属性，并且需要确保这个属性是双向绑定的，那么就需要使用this.$set()方法，进行强制视图更新。