<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
  }
}
相关推荐
前端小巷子6 分钟前
JS打造“九宫格抽奖”
前端·javascript·面试
潘小安9 分钟前
『译』资深前端开发者如何看待React架构
前端·react.js·面试
李昊哲小课33 分钟前
HTML 完整教程与实践
前端·html
老华带你飞1 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
GISer_Jing1 小时前
React 18的createRoot与render全面对比
前端·react.js·前端框架
我叫汪枫1 小时前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架
我叫汪枫1 小时前
深入探索React渲染原理与性能优化策略
前端·react.js·性能优化
Ares-Wang1 小时前
Vue3》》eslint Prettier husky
开发语言·javascript·ecmascript
阿智@111 小时前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
EveryPossible1 小时前
静态箭头连线
开发语言·javascript·ecmascript