当前位置：首页 > news >正文

数组循环form表单对象校验

news 来源：原创 2024/10/1 1:18:46

<el-button type="primary" icon="el-icon-circle-plus-outline" :size="$formSize" @click="addDevice" :disabled="readOnly">添加</el-button><!--整个表单块循环-->
<div v-for="(item,index) in actionList" :key="item.devId" class="block"><el-form ref="actionBlockForm" :model="item" :rules="formBlockRule" :size="$formSize" label-width="130px"><el-form-item :label="'执行设备'+(index < 10 ? '0' + (index+1) : (index+1))" prop="devAlias"><el-input v-model="item.devAlias" style="width: 300px;" disabled></el-input></el-form-item><el-form-item label="控制" prop="checkList"><el-checkbox-group v-model="item.checkList"><el-checkbox v-for="(item1,index1) in item.currentProperty" @change="handleCheckboxChange(index, item1.identifier)" :key="index1" :label="item1.identifier" :disabled="readOnly">{{item1.identifierDesc}}</el-checkbox></el-checkbox-group></el-form-item></el-form><el-button :size="$formSize" class="button-delete-primary" :disabled="readOnly" icon="el-icon-delete" @click="delBlock(index)">删除</el-button>
</div><!--提交按钮-->
<el-button :size="$buttonSize" class="button-minwidth" type="primary" :disabled="readOnly" :loading="btnLoading" @click="onSubmit">提交</el-button>

//数据定义、表单prop校验
data(){return{actionList:[],formBlockRule:{devAlias:[{ required: true, message: '执行设备名称不能为空', trigger: "blur" }],checkList:[{ type:'array', required: true, message: '请至少选择一个选项', trigger: 'change'} ]}}
},
methods:{//添加addDevice(){//this.actionList.push()},// 勾选监听//(动态勾选：通过监听改变直接赋值，选中指定勾选值取消其他值的勾选状态，勾选其他值取消指定值的勾选状态)handleCheckboxChange(index,value){if(value!=='multiSwitch'){let arr =this.actionList[index].checkList.filter((item) => item !== 'multiSwitch')this.actionList[index].checkList=arr}else{this.actionList[index].checkList=['multiSwitch']}},//删除delBlock(index){this.actionList.splice(index, 1);},//提交onSubmit(){//循环表单校验function validateList(formArr) {let arr = [];formArr.forEach((item) => {arr.push(new Promise((resolve) => {item.validate((valid) => {if (!valid) {resolve(false);}resolve(true);});}));});return arr;}const validateactionBlockForm = () => {return new Promise((resolve) => {let formArr = this.$refs["actionBlockForm"]; if (!formArr) {resolve(true);return;}Promise.all(validateList(formArr)).then((res) => {if (res.includes(false)) {resolve(false);} else {resolve(true);}});})}validateactionBlockForm().then((res) => {if (!res) return;//调接口提交数据}
}