需求情景
在网页上点击‘解析验证’按钮,在屏幕上显示弹窗,弹窗中内容为单选按钮,同时要将选中的内容传回后端数据库中
解决方案
点击按钮
<el-button type="text" icon="el-icon-s-platform" @click="handleVerification(scope.row.id)">解析验证 </el-button>
handleVerification函数
handleVerification(taskid){ //操作下的解析验证按钮处理函数
this.$msgbox({
title: '提交解析验证结果',
dangerouslyUseHTMLString: true, // 可以读取html字段
customClass: 'verification_dialog', // 动态设置这个弹框的class,可以修改样式
message: '<div class="v_dialog"><input class="input1" type="radio" name="resultV" value="1">验证成功</input>'+
'<input class="input2" type="radio" name="resultV" value="2">下载失败</input></div>',
showCancelButton: true,
confirmButtonText: '确定' // 确定按钮的字,可以自己修改
}).then(action => {
console.log(taskid)
console.log($("input[type='radio']:checked").val())
postVerificationResults({
taskId:taskid,
verifyCode:$("input[type='radio']:checked").val()
}).then(res => {
console.log($("input[type='radio']"))
console.log('按钮',res)
this.getCrawlList()
// 对单选按钮进行重置,保证每次进入时为未选中状态
$("input[type='radio']")[0].checked=false;
$("input[type='radio']")[1].checked=false;
})
}).catch(() => {
$("input[type='radio']")[0].checked=false;
$("input[type='radio']")[1].checked=false;
})