Element-Plus输入框设置千分位

Element-Plus中input标签设置千分位

Element-Plus是基于Vue3的组件库 提供了丰富的功能性组件

但是在处理数字输入时Element-Plus的默认行为不会满足需求 比如再用户输入数字是自动添加千分位分隔符 或限制小数点后的位数

我这个方法使用的是

pixiu-number-toolkit库中的@handsomewolf/num-utils

它提供了一系列函数，可以帮助我们处理数字格式化、千位分隔符的添加

npm install pixiu-number-toolkit @handsomewolf/num-utils

或者使用

yarn add pixiu-number-toolkit @handsomewolf/num-utils

页面中使用

引入import {
  addThousandSeparatorForElementPlus,
  removeThousandSeparatorForElementPlus
} from '@handsomewolf/num-utils';
 在input标签中设置属性 formatter 和parser
  <el-input
   v-model="DateList.collectionList.amount" 
   :formatter="addThousandSeparatorForElementPlus"
   :parser="removeThousandSeparatorForElementPlus">

设置默认返回值或者限制小数位数

<el-input 
  v-model="DateList.collectionList.amount" 
  :formatter="addThousandSeparatorForElementPlus"
  :parser="value => removeThousandSeparatorForElementPlus(value,{ defaultReturn:'0', decimalPlaces:2 })"
>
</el-input>

这样就ok了 有什么不懂的可以私我