<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
  }
}
相关推荐
lichenyang45313 分钟前
把 demo 里的 console.log 全换成 HiLog:从 %{private} 没脱敏的困惑说起
前端
烬羽16 分钟前
JS 单线程为什么不卡?一文吃透同步异步、Event Loop 和 Promise
javascript·面试
光影少年18 分钟前
组件复用:HOC、Render Props、自定义Hook 对比
前端·react.js·掘金·金石计划
Gauss松鼠会21 分钟前
【GaussDB】GaussDB SMP特性调优详解
java·服务器·前端·数据库·sql·算法·gaussdb
葬送的代码人生27 分钟前
JavaScript 数组完全指南:从入门到实战
前端·javascript·算法
用户9385156350728 分钟前
深入理解 JavaScript 同步与异步:从单线程到事件循环与 Promise
前端·javascript
搬砖的码农29 分钟前
造一个 Agent 运行时 #01:我决定开干,顺便把坑都写下来
前端·agent·ai编程
yingyima32 分钟前
深入解析:定时任务失败重试机制的底层原理与实践
前端
哈撒Ki32 分钟前
快速入门vue3与常见面试题
前端·vue.js·面试
踩着两条虫37 分钟前
VTJ.PRO v2.4.2 私有化部署与升级实操指南
前端·人工智能·低代码·架构·数据挖掘