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

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

1、实现 思路

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

2、截图 效果

在这里插入图片描述

3、实现 代码

&lt;el-table ref="table" border :data="tableData" v-loading="loading" max-height="300" show-summary :summary-method="getSummaries"&gt;
      <el-table-column type="index" align="center" label="序号" width="50"&gt;</el-table-column&gt;
      <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 &amp;&amp; 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>