el-form 表单中使用第三方插件已经输入内容但还是报错

碰到一个需求,需要在管理后台设置定时器cron表达式.在github上找到一个插件vue-cron-generator 放到表单中测试时发现.即使已经输入正确的表达式还是会出现未输入的提示. 代码如下

<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
  <el-form-item label="类型" prop="rank_type">
    <el-select v-model="temp.rank_type" style="width: 180px" class="filter-item filter-padding" placeholder="选择类型">
      <el-option v-for="item in typeOpt" :key="item.key" :label="item.label" :value="item.key" />
    </el-select>
  </el-form-item>
  <el-form-item label="游戏" prop="game_code">
    <el-select v-model="temp.game_code" style="width: 180px" class="filter-item filter-padding" :disabled="dialogStatus==='update'" placeholder="选择游戏">
      <el-option v-for="item in gameOpt" :key="item.key" :label="item.label" :value="item.key" />
    </el-select>
  </el-form-item>
  <el-form-item v-if="showCron(temp.rank_type)" label="周期" prop="cron">
    <cron-input v-model="temp.cron" @change="cronChange" @reset="resetCron" />
  </el-form-item>

rules设置 这样当我通过插件输入值的时候,cronChange是读到了值的变化.但还是会提示 请输入cron表达式

可以看到 el-form 中的model值 rules,还有el-form-item prop值设置都为正确的.和网上查到的一些常见错误不一样.我后来还把三方插件的部分代码直接复制到item里面.依然会出现同样问题 试了好久.最后我把rules写到el-form-item里

<el-form-item
  v-if="showCron(temp.rank_type)"
  label="周期"
  :rules="[    { type: 'string', required: true, message: '请输入Cron表达式', trigger: 'change' }, {      pattern:        /^((((\d+,)+\d+|(\d+(/|-|#)\d+)|\d+L?|*(/\d+)?|L(-\d+)?|?|[A-Z]{3}(-[A-Z]{3})?) ?){5,7})$|(@(annually|yearly|monthly|weekly|daily|hourly|reboot))|(@every (\d+(ns|us|µs|ms|s|m|h))+)/,
      message: '请输入正确的Cron表达式'
    }]"
>

突然就可以了.感觉很无语,不知道大家有没有碰到同样的问题