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

1、实现思路

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

2、截图效果

3、实现代码

<el-table ref="table" border :data="tableData" v-loading="loading" max-height="300" show-summary :summary-method="getSummaries">
      <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
      <el-table-column align="center" label="数值" width="130" label-class-name="header-require">
        <template slot-scope="scope">
          <span class="el-input--mini" v-show="tableCurrent !== scope.$index" @click="showInput(scope.$index)">
            <span class="el-input__inner">{
   
   {toFormatMoney(scope.row.value) || '0.00'}}</span>
          </span>
          <el-input
            v-show="tableCurrent === scope.$index"
            :ref="`valueRef_${scope.$index}`"
            v-model="scope.row.value"
            clearable
            size="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>
export default {
    
    
  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>