<el-input-number>显示两位数字;如果是一位数字的话前面补0

可以通过自定义 formatter 函数来实现。具体步骤如下:

  1. 在 <el-input-number> 上添加 :formatter 属性,值为 formatter 函数名。

  2. 在 methods 中定义 formatter 函数,该函数接收一个参数 value,表示当前输入框中的值。

  3. 在 formatter 函数中,先将 value 转化为字符串形式,然后判断字符串长度是否为 1,如果是,则在字符串前面添加一个 0。

  4. 最后返回处理后的字符串即可。

代码示例:

复制代码
<el-input-number :formatter="formatNumber"></el-input-number>

methods: {
  formatNumber(value) {
    let str = value.toString()
    if (str.length === 1) {
      str = '0' + str
    }
    return str
  }
}
相关推荐
看到我请叫我铁锤20 小时前
vue3中THINGJS初始化步骤
前端·javascript·vue.js·3d
q***252120 小时前
SpringMVC 请求参数接收
前端·javascript·算法
q***333720 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
烛阴21 小时前
从`new()`到`.DoSomething()`:一篇讲透C#方法与构造函数的终极指南
前端·c#
还债大湿兄21 小时前
阿里通义千问调用图像大模型生成轮动漫风格 python调用
开发语言·前端·python
谢尔登21 小时前
defineProperty如何弥补数组响应式不足的缺陷
前端·javascript·vue.js
蓝瑟忧伤21 小时前
前端技术新十年:从工程体系到智能化开发的全景演进
前端
Baklib梅梅1 天前
员工手册:保障运营一致性与提升组织效率的核心载体
前端·ruby on rails·前端框架·ruby
涔溪1 天前
实现将 Vue2 子应用通过无界(Wujie)微前端框架接入到 Vue3 主应用中(即 Vue3 主应用集成 Vue2 子应用)
vue.js·微前端·wujie
IT_陈寒1 天前
Redis性能翻倍的5个冷门技巧,90%开发者都不知道第3个!
前端·人工智能·后端