木灵鱼儿

木灵鱼儿

阅读:156

最后更新:2021/08/27/ 16:27:19

关于element el-input 输入的值需要转number的问题

前言

经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》

里面有关于数字类型校验的方式,基本涵盖了日常需求。

但是,仅仅就只能这样吗???

no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?

要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。

有人说用.number;其实这个问题之前就聊过了,这个修饰符只能处理整形数字,小数是做不了的。

所以今天来谈谈怎么搞定这个转换。

做法

<template>
  <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" size="medium">
    <el-form-item label="产品折扣:" prop="discount">
      <el-input v-model="form.discount" placeholder="请输入产品折扣">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
         form: {
           discount:"", //产品折扣
         },
         rules: {
           discount: [
             {
               required: true,
                type: "number",
                min: 0,
                max: 100,
                message: "请输入0-100的数字",
                trigger: "blur",
                transform(value) {
                   return value !== "" ? Number(value) : "";
                }
             }
           ]
         }
      }
    }
  
  }
</script>

这是一个根据我之前教程写的,用于校验数字的例子,由于需要必填,所以对空字符要做单独处理,因为空字符被Number转换后事0;0也是数字,必填就无效了,所以单独处理。

但是这样会有一个问题,我们form里面的discount还是字符的格式,transform并不会改变源值。

市面上的方法(除了自定义指令),我都测过了,不行,那么我们只有一条路可走:在合适的时机修改源值

在合适的时机修改源值

我的做法是在transform里面修改,因为我本身在校验的时候就做了类型转换,为啥还要在转一次呢,是吧。

那么,我们就需要在transform中拿到form,简单点就直接通过this呗。

于是:

<template>
  <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" size="medium">
    <el-form-item label="产品折扣:" prop="discount">
      <el-input v-model="form.discount" placeholder="请输入产品折扣">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      const transform = (key)=>{
         return {
            required: true,
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0-100的数字",
            trigger: "blur",
            transform: (value)=> {
              const newValue = value !== "" ? Number(value) : "";
              if (Number.isFinite(newValue)) {
                this.form[key] = newValue;
              }
              return newValue;
            }
         }
      }
      return {
         form: {
           discount:"", //产品折扣
         },
         rules: {
           discount: [transform("discount")]
         }
      }
    }
  
  }
</script>

通过箭头函数拿到this,然后判断下,如果是有限数字,那么就赋值,测试了下,效果不错。

而且自己二次开发一下也可以

优化

仔细品读一下发现最重要的是this上下文,而且如果把配置丢在data上面,感觉很不美观,而且,复用不方便,于是乎:

<template>
  <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" size="medium">
    <el-form-item label="产品折扣:" prop="discount">
      <el-input v-model="form.discount" placeholder="请输入产品折扣">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      const transform = (data) => data;
      return {
         form: {
           discount:"", //产品折扣
         },
         rules: {
           discount: [
             transform({
              required: true,
              type: "number",
              min: 0,
              max: 100,
              message: "请输入0-100的数字",
              trigger: "blur",
              transform: (value)=> {
                const newValue = value !== "" ? Number(value) : "";
                if (Number.isFinite(newValue)) {
                  this.form[key] = newValue;
                }
                return newValue;
              }
             })
           ]
         }
      }
    }
  
  }
</script>

这种方式,利用函数作用域的概念,将校验对象的作用域改变,从而拿到this,从写法上更加灵活,但是复用性就相对差一些。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 13
文章被阅读 156

相关文章