在一个编辑页面使用了el-form嵌套el-table的形式,保存的时候使用if来判断是否空值,如果是空值的就弹出提示并且阻止提交,但是这样做好像是不对的,因为目前的状态还是不用校验就保存成功了,非常困惑,请教一下各位
以下贴上我的所有相关代码:
<el-form :model="secondClassify" ref="secondClassify">
<xn-table
ref="saveTab"
:data="secondClassify.saveTabArr"
style="width: 98%"
:showPagination="false"
>
<el-table-column
label="序号"
type="index"
width="60"
align="center"
/>
<xn-col label="排序" align="center" type="draggable" width="50px" />
<el-table-column align="center">
<span slot="header" slot-scope="scope">
<span class="redSpan">*</span>名称
</span>
<template slot-scope="scope">
<el-form-item
:prop="'saveTabArr.' + scope.$index + '.catalogName'"
:rules="[
{
required: true,
trigger: ['blur', 'change'],
message: '名称不能为空'
}
]"
>
<el-input
v-model.trim="scope.row.catalogName"
:maxlength="200"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center">
<span slot="header" slot-scope="scope">
<span class="redSpan">*</span>键值
</span>
<template slot-scope="scope">
<el-form-item
:prop="'saveTabArr.' + scope.$index + '.catalogValue'"
:rules="[
{
required: true,
trigger: ['blur', 'change'],
message: '键值不能为空'
}
]"
>
<el-input
v-model.trim="scope.row.catalogValue"
:maxlength="200"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" width="60" align="center">
<template slot-scope="scope">
<xn-col-button
@click="delOne(scope.$index, scope.row)"
type="text"
size="small"
>删除</xn-col-button
>
</template>
</el-table-column>
</xn-table>
</el-form>
<el-form>
<el-form-item>
<div style="text-align: center">
<el-button type="primary" @click="saveEnum">保存</el-button>
<el-button type="primary" @click="backList">取消</el-button>
</div>
</el-form-item>
</el-form>
然后data声明
```html
return {
fristClassify: {
value: ""
},
fristClassifyOption: [],
secondClassify: {
saveTabArr: []
}
};
保存的代码以下
let params = {
secondCatalogs: "",
typeKey: this.fristClassify.value,
tableList: this.$refs.saveTab.$refs.table.data
};
this.$http
.post("接口", params)
.then(result => {
if (result.resultcode == "0") {
this.$message.success("保存成功");
this.$closeTab();
} else {
this.$message.error("保存失败!请检查");
// this.$closeTab();
}
})
.catch(result => {
this.$message.error("保存失败!请检查");
});
```