文章目录
- antV+vue3 单选框选中加入逻辑运算，再次点击取消选中，不计入逻辑运算
- 需求
- 增加点击事件
- 逻辑处理
- 效果
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.rkValueif (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.value.score = (0.25).toFixed(4)}}}
getNowRaValue 方法：
const lastRaValue = ref()const newRaValue = ref()const getNowRaValue = (key) => {newRaValue.value = keyif (newRaValue.value === lastRaValue.value) {newRaValue.value = undefinedlastRaValue.value = undefinedformStateEdit.value.raValue = undefinedlet d = formStateEdit.value.dValue,a = formStateEdit.value.aValue,k = formStateEdit.value.kValue,ra = formStateEdit.value.raValue,rk = formStateEdit.value.rkValueif (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}} 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}} 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.value.score = 0.25}}} else {lastRaValue.value = newRaValue.valueformStateEdit.value.raValue = newRaValue.valuelet d = formStateEdit.value.dValue,a = formStateEdit.value.aValue,k = formStateEdit.value.kValue,ra = formStateEdit.value.raValue,rk = formStateEdit.value.rkValueif (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}} 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}} 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.value.score = 0.25}}}}
getNowRkValue方法：
const lastRkValue = ref()const newRkValue = ref()const getNowRkValue = (key) => {newRkValue.value = keyif (newRkValue.value === lastRkValue.value) {newRkValue.value = undefinedlastRkValue.value = undefinedformStateEdit.value.rkValue = undefinedlet d = formStateEdit.value.dValue,a = formStateEdit.value.aValue,k = formStateEdit.value.kValue,ra = formStateEdit.value.raValue,rk = formStateEdit.value.rkValueif (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}} 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}} 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.value.score = 0.25}}} else {lastRkValue.value = newRkValue.valueformStateEdit.value.rkValue = newRkValue.valuelet d = formStateEdit.value.dValue,a = formStateEdit.value.aValue,k = formStateEdit.value.kValue,ra = formStateEdit.value.raValue,rk = formStateEdit.value.rkValueif (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}} 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}} 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.value.score = 0.25}}}}
注意：
- 首次打开编辑页面时候，需要给lastRaValue、lastRkValue赋上初值。
- 可以Number()字符串转数字类型以及.toFixed(4)保留一下小数，不然会出现超额数字出现随机数（概率挺高的，这里的ra为0.2，rk为1.2的时候，基本都会出现，所以加上了这两个操作）。
此外，getNowRaValue以及getNowRkValue方法存在大量逻辑冗余，曾尝试直接给formStateEdit.value.raValue、formStateEdit.value.rkValue赋值，然后进行逻辑操作，但是失败了，大家有需要可以精进一下。
效果
)
