el-input 输入值大于0且最多保留两位小数

星星散落人间

已于 2023-04-18 14:35:38 修改

阅读量1.1k

点赞数

文章标签：前端 javascript

于 2023-04-11 17:32:38 首次发布

本文链接：https://blog.youkuaiyun.com/future_1_/article/details/130089155

版权

文章展示了在Vue.js中使用<el-input>组件结合正则表达式限制用户输入的价格保留两位小数的方法。通过v-model和onkeyup事件处理，以及在表格列（el-table-column）中使用changePrice方法来确保价格字段始终只显示最多两位小数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.

  <el-input v-model="value"
              onkeyup="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" 
            />

2.

   <el-table-column prop="price" label="价格">
          <template scope="scope">
            <el-input v-model="scope.row.price" @input="changePrice(scope.row)" />
          </template>
   </el-table-column>  

   changePrice(row) {
      row.price= row.price.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,"$1");
   },

d{0,2} 代表保留两位小数