【Vue+Element-ui】在elment-form中使用rulers检验number踩坑

出现的问题

<el-form :model="create_form" :rules="create_rules">
            <el-form-item label="商品价格" :label-width="formLabelWidth" prop="price">
              <el-input v-model="create_form.price" autocomplete="off">
              </el-input>

在表单中通过rules属性判断该input是否为number，但是在运行后，numbers判断失效（即输入数字还是检验失败）

原因

原因是因为v-model在默认情况下绑定的是一个string，看了一些网上的方法即在v-model后加上.number(v-model.number)，同样不行。看了
这篇文章里的解释：

高版本的element-ui，el-input不再支持修饰符（.number .lazy .trim等都不支持）
使用的话会有bug，不同的element-ui版本bug表现不同。

解决办法

在rules有个属性transform，可以在验证前对校验的值做转换，而且这个转换并不会影响到表单绑定的源数据，具体的rules属性可以看这篇文章
成功解决：

          "price": [{
            require: true, message: "请输入商品价格", trigger: 'blur', transform(value) { return Number(value) }
          },
          { type: 'number', min: 1 }],