<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
  }
}
相关推荐
KaMeidebaby2 小时前
卡梅德生物技术快报|锦葵科植物遗传转化工程化优化:棉花胚尖农杆菌转化体系参数固化与效率提升
前端
invicinble2 小时前
前端框架使用vue-cli( 第二层:工程配置层--4.axios需要做的基础配置)
前端·vue.js·前端框架
MXN_小南学前端2 小时前
Vue + Element UI 分页器封装:比直接用 el-pagination 更省心的通用方案
javascript·vue.js·elementui
用户070455741292 小时前
第一次前后端联调后,我终于理解了什么是工程化
前端
亲亲小宝宝鸭2 小时前
Vue3中那些冷门但实用的方法
前端·vue.js
qq_349523262 小时前
分析原型到表的过程
前端
2 小时前
Pinia 全局状态管理
前端
M ? A2 小时前
Vue 转 React | VuReact 实时监听开发指南
前端·vue.js·后端·react.js·面试·开源·vureact
陆枫Larry2 小时前
uni-app 小程序:滚动联动透明导航栏的实现
前端
Lkstar2 小时前
ES6+ 必备特性复习:解构、展开运算符、Symbol、Proxy
javascript·面试