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

这篇具有很好参考价值的文章主要介绍了elementui el-input输入框金额显示千分符与输入框金额输入框表格或列表中的金额输入框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、实现思路

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

2、截图效果

input金额输入框,vue开发学习,elementUi,js,elementui,javascript,前端文章来源地址https://www.toymoban.com/news/detail-698722.html

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>