文章目录
- 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赋值,然后进行逻辑操作,但是失败了,大家有需要可以精进一下。
效果