今天在使用element ui做表单验证的时候遇到哥问题,表单中命名有内容,element ui却始终提示不能为空,源代码如下:
<el-form :inline="true" :rules="rules" ref="ztForm" :model="listQuery">
<el-form-item label="专题id" prop="zt_id" >
<el-input class="filter-item" style="width: 160px" v-model="listQuery.ztId" >
</el-input>
</el-form-item>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleCommit">提交</el-button>
</el-form>
data() {
return {
tableKey: 0,
listQuery: {
ztId: null,
mbIds: '',
},
rules: {
zt_id: [{ required: true, message: '专题id不能为空', trigger: 'blur' }],
},
};
},
问题就出在prop和form表单的v-model中的字段不一致,源码中prop为zt_id
,全部统一使用ztId
,问题解决!!