项目中表格中的复选框勾选自动累计总分项。

项目中的需求是勾选复选框，该复选框对应该项分数，总分会根据复选框是否勾选计算该项的分数 。

<tr>
                            <td>麻醉分级</td>
                            <td>
                                <el-checkbox class="medicalHistoryClick" id="nck1" @change="(val) => {
                                    JSZF1(val, 1);
                                }
                                    ">Ⅰ级</el-checkbox>
                            </td>
                            <td>
                                <el-checkbox class="medicalHistoryClick" id="nck2" @change="(val) => {
                                    JSZF1(val, 2);
                                }
                                    ">Ⅱ级</el-checkbox>
                            </td>
                            <td>
                                <el-checkbox class="medicalHistoryClick" id="nck3" @change="(val) => {
                                    JSZF1(val, 3);
                                }
                                    ">Ⅲ级</el-checkbox>
                            </td>
                            <td>
                                <el-checkbox class="medicalHistoryClick" id="nck4" @change="(val) => {
                                    JSZF1(val, 4);
                                }
                                    ">Ⅳ级</el-checkbox>
                            </td>
                        </tr>

上面是一行的选项，每一个复选框会有单独的id，让其具有唯一性，上面的类名（class=medicalHistoryClick）是做其他功能，在此可以省略。 

  data() {
      return {
            total1: 0,
        };
    },

  methods: {
      JSZF1(val, num) {
            if (val) {
                this.total1 = this.total1 + num;
            } else {
                this.total1 = this.total1 - num;
            }
            $("#input1").val(this.total1);
        },
    }

点击复选框后，当勾选状态发生变化后会触发change事件从而执行JSZF1这个方法，上面就是点击复选框后触发的逻辑方法，逻辑很简单，最后就是给计算总分的输入框赋值。

   clear() {
            this.total1 = 0;
        },

但是值得一提的是，在做其他功能再次回到这个页面，再次点击复选框，会发现数据出错，所以在重新进入页面时，要执行clear这个方法，让数据从零，若之前有勾选，从而进行逻辑处理，再次点击就不会出错。