element-ui select数据回显显示数字的问题 el-select校验失效问题

select数据回显显示数字的问题

先来看demo效果与代码

 data() {
    return {
      form: {
        sex: ''
      }
    }
  },

created() {
    this.form.sex = 1
  },

<el-form ref="form" :model="form" label-width="80px">
	<el-row>
        <el-col :span="6" height="80px">
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择">
              <el-option label="男" value="1" />
              <el-option label="女" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
     </el-row>
</el-form>

问题出现原因 dom里面option绑定的是字符串 之后给v-model重新赋值后 赋值的是一个数字
解决 让value为数字 完美解决

<el-form ref="form" :model="form" label-width="80px">
	<el-row>
        <el-col :span="6" height="80px">
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
     </el-row>
</el-form>

el-select校验失效问题

这里不做demo展示了 大概记录一下 失效的原因

因为布局的时候在 el-form中又嵌套了el-row el-col 导致 el-form-item 检测不到变化 固而校验失效了

解决方法 也是我认为比较简单的方法 把校验方式blur 改为change

rules: {
        sex: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }

其他方案 可自行百度这里不再赘述