<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
  }
}
相关推荐
亮子AI2 分钟前
给你的应用加上Google账号登录
javascript
液态不合群16 分钟前
DDD驱动低代码开发:从业务流程到领域模型的全链路设计
前端·低代码·架构·ddd
jonyleek20 分钟前
JVS低代码开发中,如何创建自定义前端页面并接入到现有系统中,从创建到接入的全攻略
前端·低代码·前端框架·软件开发
努力往上爬de蜗牛37 分钟前
react native 实现选择图片或者拍照上传(多张)
javascript·react native·react.js
谢尔登1 小时前
【React】React组件的渲染过程分为哪几个阶段?
前端·javascript·react.js
MediaTea1 小时前
Python 第三方库:Flask(轻量级 Web 框架)
开发语言·前端·后端·python·flask
5***o5001 小时前
前端构建工具缓存清理,解决依赖问题
前端·缓存
q***72561 小时前
Spring Boot + Vue 全栈开发实战指南
vue.js·spring boot·后端
lcc1871 小时前
Vue Vue与VueComponent的关系
前端·vue.js
无敌最俊朗@1 小时前
Vue 3 概况
前端·javascript·vue.js