element + vue: 循环渲染表单+Checkbox 多选框组的动态验证
先看效果图(需求)
后端返回代码格式(主要是根据返回的格式对数据进行一定变形,Checkbox 多选框的v-model必须为数组):
处理后端返回值:
<template>
<div class="functionConfig third">
<div class="third-formOne">
<div class="formOne-btn">
<div class="btn-left">
<span class="left-back-content">核验设置</span>
</div>
<div class="btn-right">
<el-button
class="btn-two"
type="primary"
@click="preservation('ruleForm')"
v-el-disabel-repeat-click
>保存</el-button
>
<el-button class="btn-two" type="default" @click="reset"
>重置</el-button
>
</div>
</div>
<div class="formOne-forms">
<el-form
label-width="46px"
:model="ruleForm"
:show-message="false"
:rules="rules"
ref="ruleForm"
@validate="validateOne"
>
<div class="forms-one" style="margin-top: 57px">
<div class="one-title">
<div class="title-left">
<span class="left-icon">
<i class="el-icon-s-operation"></i>
</span>
<span class="left-content">核验要素</span>
</div>
</div>
<div class="one-list list-line">
<div class="list-one-line">
<div >
<el-form-item
v-for="(value,key,index) in ruleForm" :key="index" //这里for in 循环对象
:prop="key"
:rules="[
{
type: 'array',
required: true,
message: `${key}设备至少选择一项`,
trigger: 'change',
},
]"
style="margin: 0"
>
<div style="display: flex; align-items: center">
<span style="width: 160px; text-align: right">
<span style="color: #f56c6c; font-size: 12px">*</span> //我没有用表单自带的labe所以没有红色的*号(el-popover的原因,需求需要el-popover和labe在一起)
<span style="padding: 0 5px; font-size: 12px" v-if="key==='OneStepFV'">一键核验(OneStepFV)</span>
<span style="padding: 0 5px; font-size: 12px" v-else-if="key==='JSAPI'">学生自主核验(JSAPI)</span>
<span style="padding: 0 5px; font-size: 12px" v-else>{{key}}</span>
<el-popover
v-show="key == 'V2' || key == 'OneStepFV' || key == 'FT1_MINI'"
style="margin: 0 5px 0 0"
placement="top-start"
width="300"
trigger="hover"
content="公安部核验、用户照片需至少勾选一个"
>
<i
slot="reference"
class="el-icon-warning-outline"
></i>
</el-popover>
</span>
<el-checkbox-group
style="display: inline-block; margin-top: 3px"
v-model="ruleForm[key]" //动态绑定
>
<el-checkbox label="身份信息核验" disabled
>身份信息核验</el-checkbox>//身份信息核验这一个选择项目是写死了的,所以我就做了个假的
<template v-for="(item,index) in checked1">
<el-checkbox :label="item" :key="index" >{{item}}</el-checkbox>
</template>
</el-checkbox-group>
</div>
</el-form-item>
</div>
</div>
</div>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
name: "thirdThree",
data() {
return {
ruleForm: {
},
countNum: 1,
checked1: [ "公安部核验", "用户照片"],
rules: {}
};
},
mounted() {
this.roleStuList(); //页面初始化加载后端返回数据
},
methods: {
async roleStuList() {
try {
let {
data: { status, msg, result },
} = await this.$store.dispatch("getSet");
if (status === 1000) {
const arr = JSON.parse(JSON.stringify(result))//深拷贝一下返回值
let NEwobj = {}
arr.forEach((elment) => {
const arr = ['身份信息核验']; //Checkbox 多选框对应选项的Labe如果再数组在存在,即为选中
if (elment.publicSecurityIdentityCheck === "1") { //"1"为选中 "0"为未选中
arr.push("公安部核验");
}
if (elment.userFaceCheck === "1") {
arr.push("用户照片");
}
NEwobj[elment.id] = arr;//给返回值变形
});
this.ruleForm = JSON.parse(JSON.stringify(NEwobj))
console.log(this.ruleForm);
} else {
this.$message({
type: "error",
message: msg,
});
}
} catch (err) {
console.log(err);
}
},
validateOne(prop, msgStatus, validateMessage) {
// console.log(prop, msgStatus, validateMessage)
if (!msgStatus && !this.countNum) {
this.countNum += 1; //这句话是为了让错误提示一次只出现一条
if (validateMessage) {
this.$message.error(validateMessage);
}
}
},
async preservation(formName) { //提交前处理获取到的值
this.countNum = 0;
this.$refs[formName].validate((valid) => {
if (valid) {
this.countNumTwo = 1;
const arr=[]
for(var element in this.ruleForm){//再这里再对至少选择两项的选择项做验证,上面都做了最低选择一项
if(element=='OneStepFV' && this.ruleForm[element].length<2 || element=='JSAPI' && this.ruleForm[element].length<2 || element=='FT1_MINI' && this.ruleForm[element].length<2){
this.$message.error(`${element}设备 公安部核验、用户照片需至少勾选一个`)
return
}
const smallJson={}//应后端要求是对返回参数在做更改
smallJson.id=element
if(this.ruleForm[element].indexOf('公安部核验') != -1){
smallJson.publicSecurityIdentityCheck='1'
}else{
smallJson.publicSecurityIdentityCheck='0'
}
if(this.ruleForm[element].indexOf('用户照片') != -1){
smallJson.userFaceCheck='1'
}else{
smallJson.userFaceCheck='0'
}
arr.push(smallJson)
}
console.log(arr)
this.goUpdate(arr)
}
});
},
async goUpdate(arr) {
let parms = {
options: arr,
};
try {
let {
data: { status, msg },
} = await this.$store.dispatch("saveSet", parms);
if (status == 1000) {
console.log(msg);
this.$message({
message: msg,
type: "success",
});
} else {
this.$message({
type: "error",
message: msg,
});
}
} catch (err) {
console.log(err);
}
},
reset() {//重置
this.roleStuList();
},
},
};
</script>
<style lang="scss">
.aaa {
display: inline-block;
text-align: right;
}
</style>
返回给后端的参数
就这样完美