遇到一個問題，適用elementUI的表單校驗時，select校驗總是不通過
代碼如下：

<el-form label-width="100px"  :model="addForm" :rules="rules" ref="addForm">
  <el-form-item label="報表" :label-width="formLabelWidth" prop="report">
    <el-select v-model="addForm.reportValue" placeholder="請選擇報表" style="width:275px">
      <el-option v-for="item in addForm.reportOptions" :label="item.name" :value="(item.id)*1">
      </el-option>
    </el-select>
  </el-form-item>
</el-form>
<script>
export default {
  data() {
    return {
      addForm: {
        reportValue: '',
      },
      rules: {
        report: [ { required: true, message: '請選擇報表', trigger: 'change' } ],
      }
    }
  }
}
</script>

image.png

image.png

經(jīng)過多方排查，終于找到問題所在：
重點啦！重點啦！
表單中每個item項v-model綁定的data的字段，必須必須必須，和rules中的對應(yīng)字段，名字名字名字，一樣，否則校驗時取不到值（undefined），所以無論輸入什么或者選擇什么都校驗不過。

正確代碼方式如下

<el-form label-width="100px"  :model="addForm" :rules="rules" ref="addForm">
  <el-form-item label="報表"  prop="reportValue">
    <el-select v-model="addForm.reportValue" placeholder="請選擇報表">
      <el-option v-for="item in addForm.reportOptions" :label="item.name" :value="(item.id)*1">
      </el-option>
    </el-select>
  </el-form-item>
</el-form>
<script>
export default {
  data() {
    return {
      addForm: {
        reportValue: '',
      },
      rules: {
        reportValue: [ { required: true, message: '請選擇報表', trigger: 'change' } ],
      }
    }
  }
}
</script>