数组循环form表单对象校验

作者 : admin 本文共2207个字,预计阅读时间需要6分钟 发布时间: 2024-06-17 共1人阅读
<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;
//调接口提交数据
}
}
本站无任何商业行为
个人在线分享 » 数组循环form表单对象校验
E-->