项目中的需求是勾选复选框,该复选框对应该项分数,总分会根据复选框是否勾选计算该项的分数 。
<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这个方法,让数据从零,若之前有勾选,从而进行逻辑处理,再次点击就不会出错。