antV+vue3 单选框选中加入逻辑运算,再次点击取消选中,不计入逻辑运算
需求
在做项目时,多次遇到单选框需要再次点击时取消选中的效果,上次感觉没有遇到困难就没有记录,这次增加了逻辑计算,在此记录一下。
参数选择处需要增加再次选择进行取消选择的操作。
数学逻辑是在选中参数选择时,参数选择需要参与运算,不选择时,不参与运算。
增加点击事件
之前不需要取消的单选框正常使用change就可以,需要第二次点击取消选中的单选框使用change无法达到想要的效果,所以我们这里给他增加一个click事件。
逻辑处理
getComplianceDesc方法:
由于不需要进行额外的判断,直接进行逻辑判断即可
const getComplianceDesc = () => {
let d = formStateEdit.value.dValue,
a = formStateEdit.value.aValue,
k = formStateEdit.value.kValue,
ra = formStateEdit.value.raValue,
rk = formStateEdit.value.rkValue
if (d == 1) {
formStateEdit.value.score = 0
} else if (d == 2) {
formStateEdit.value.score = '/'
} else if ((d == 0 && a == 1 && k == 0) || (d == 0 && a == 0 && k == 1)) {
if (ra) {
if (rk) {
formStateEdit.value.score = (Number(ra) * Number(rk) * 0.5).toFixed(4)
} else {
formStateEdit.value.score = (Number(ra) * 0.5).toFixed(4)
}
} else if (rk) {
formStateEdit.value.score = (Number(rk) * 0.5).toFixed(4)
} else {
formStateEdit.value.score = (0.5).toFixed(4)
}
} else if ((d == 0 && a == 0 && k == 0) || (d == 0 && a == 2 && k == 2)) {
if (ra) {
if (rk) {
formStateEdit.value.score = (Number(ra) * Number(rk) * 1).toFixed(4)
} else {
formStateEdit.value.score = (Number(ra) * 1).toFixed(4)
}
} else if (rk) {
formStateEdit.value.score = (Number(rk) * 1).toFixed(4)
} else {
formStateEdit.value.score = (1).toFixed(4)
}
} else {
if (ra) {
if (rk) {
formStateEdit.value.score = (Number(ra) * Number(rk) * 0.25).toFixed(4)
} else {
formStateEdit.value.score = (Number(ra) * 0.25).toFixed(4)
}
} else if (rk) {
formStateEdit.value.score = (Number(rk) * 0.25).toFixed(4)
} else {
formStateEdit