今天在使用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,问题解决!!