elementui el-input输入框金额显示 千分符与输入框 金额输入框 表格或列表中的金额输入框

1、实现思路

当用户不对输入框进行任何处理时，将数值转成千分符形式，例如 12,345.67 格式，在用户点击金额进行输入修改操作的时候，显示的数值形式12345.67，并且用户在输入过程中禁止输入中文、英文、特殊符号、英文逗号等，只能输入数字、一位小数点、小数点后2位；修改输入框内容时，更新表格合计值。

2、截图效果

3、实现代码

<el-tableref="table"border:data="tableData"v-loading="loading"max-height="300"show-summary:summary-method="getSummaries"><el-table-columntype="index"align="center"label="序号"width="50"></el-table-column><el-table-columnalign="center"label="数值"width="130"label-class-name="header-require"><templateslot-scope="scope"><spanclass="el-input--mini"v-show="tableCurrent !== scope.$index"@click="showInput(scope.$index)"><spanclass="el-input__inner">{{toFormatMoney(scope.row.value) || '0.00'}}</span></span><el-inputv-show="tableCurrent === scope.$index":ref="`valueRef_${scope.$index}`"v-model="scope.row.value"clearablesize="mini"onkeyup="this.value=this.value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/,'$1$2$3').replace(/^0+(\d)/,'$1').match(/^\d*(\.?\d{0,2})/g)[0]||''"@input="(value) => inputHandle(value, scope.row)"@blur="blurHandle($event, scope.row)"/></template></el-table-column></el-table>

<script>exportdefault{name:'useApplyListBottomTable',components:{ImportExcel, AssetTypeDialog},mixins:[mixins],data(){return{tableCurrent:null,tableData:[]}},methods:{/** 显示输入框 */showInput(index){this.tableCurrent = index
      this.$nextTick(()=>{this.$refs[`valueRef_${index}`].focus()})},/** 校验内容 */validateAssetValue(value){let val = value?.replace(/,/g,"")let valueNum =Number(val)return value &&isNaN(valueNum)?0: val
    },/** 输入框 */inputHandle(value, row){
      row.value =this.validateAssetValue(value)},/** 失去焦点 */blurHandle(event, row){const value = event.target.value
      row.value =this.validateAssetValue(value)this.tableCurrent =null},/** 在组件中使用千分符 */toFormatMoney(value){// 网上有很多教程，自行查阅},/** 计算合计 */getSummaries(param){const{columns, data}= param;// console.log('columns', columns, 'data', data);const sums =[];
      columns.forEach((column, index)=>{if(index ===0){let total =0
          data.forEach(item=>{
            total +=Number(item.value)})const formatTotal =this.sums ==0?'0':this.toFormatMoney(this.sums)
          sums[index]=`合计： ${formatTotal} 元`}else{
          sums[index]=''}});return sums;},}}</script>