先看效果图:
以下是html代码
<el-form
:model="newObj"
ref="dataForm"
:inline="true"
class="demo-form-inline"
v-for="(domain, index) in newObj.newObjArr"
:key="domain.key"
>
<el-form-item
label="楼名"
:prop="'newObjArr.' + index + '.name'"
:rules="{
required: true,
message: '楼名不能为空',
trigger: 'blur'
}"
>
<el-input v-model="domain.name" placeholder="请输入楼名"></el-input>
</el-form-item>
<el-form-item
label="负责人"
:prop="'newObjArr.' + index + '.principalId'"
:rules="{
required: true,
message: '负责人不能为空',
trigger: 'blur'
}"
>
<el-select v-model="domain.principalId" placeholder="请选择负责人">
<el-option
v-for="item in principalList"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="add">+</el-button>
<el-button @click="cut(index)">-</el-button>
<el-button @click="up(index)">↑</el-button>
<el-button @click="down(index)">↓</el-button>
</el-form-item>
</el-form>
<div style="text-align: center">
<el-button @click="submitNewObj" type="primary">提交</el-button
>
<el-button @click="cut(index)" type="info">取消</el-button>
</div>
以下是js代码
submitNewObj() {
//循环校验数据合法性
var checkResult = true;
var validateArr = this.$refs["dataForm"];
//1.由于此时需要校验的 = this.$refs["dataForm"] 是个数组所有需要循环校验
//2. this.$refs["dataForm"]. validate 是异步的. 使用 return new Promise 可以实现同步
//3 循环校验完了 如果 定义的checkResult 还是 true 就提交数据
validateArr.forEach(item => {
return new Promise((resolve, reject) => {
item.validate(valid => {
if (valid) {
resolve(true);
} else {
checkResult = false;
console.log("错了 你停下来了吗?");
resolve(false);
}
});
});
});
//2 提交数据
if (checkResult) {
// TODO 发送ajax 提交数据
alert("提交数据");
}
},