vue-element-admin我踩的坑（3）

下拉选择框rule校验问题，发现的问题是选择框根本没选，居然也能校验通过？？！！（框体绿色，form的validdate通过）

代码：

tempalete:

<el-form-item label="aaa" prop="listItem">
  <el-select v-loading="loading" v-model="listItem" class="filter-item">
    <el-option v-for="item in itemList" :key="item.id" :label="item.name" :value="item.name"/>
   </el-select>
</el-form-item>

script:

export default｛

data() {

return {

listItem: undefined,

rules: {
        listItem: [{ required: true, message: '必填字段', trigger: 'blur' }]
      }

......

尝试了一下，没发现什么问题。最后通过自定义校验,检查下拉框绑定的变量解决：

script:

export default｛

data() {

var listRule= (rule, value, callback) => {
      if (this.listItem === '' || this.listItem === undefined || this.listItem === null) {
        callback(new Error('必填字段'))
      } else {
        callback()
      }
    }

return {

listItem: undefined,

rules: {
        getList: [{ validator: listRule, message: '必填字段', trigger: 'blur' }]
      }

......

 

如果标签没有表示必填的红色信号，可以添加一个class：

<el-form-item label="aaa" prop="listItem" class="is-required">

但trigger其实没有生效，这个还搞不清楚。应该可以在组件的相应事件里面使用validateField方法手工触发（没有实际试过）。