1、實(shí)現(xiàn)思路

當(dāng)用戶不對(duì)輸入框進(jìn)行任何處理時(shí)，將數(shù)值轉(zhuǎn)成千分符形式，例如 12,345.67 格式，在用戶點(diǎn)擊金額進(jìn)行輸入修改操作的時(shí)候，顯示的數(shù)值形式12345.67，并且用戶在輸入過程中禁止輸入中文、英文、特殊符號(hào)、英文逗號(hào)等，只能輸入數(shù)字、一位小數(shù)點(diǎn)、小數(shù)點(diǎn)后2位；修改輸入框內(nèi)容時(shí)，更新表格合計(jì)值。

2、截圖效果

文章來源地址http://www.zghlxwxcb.cn/news/detail-698722.html

3、實(shí)現(xiàn)代碼

<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="序號(hào)" width="50"></el-table-column>
      <el-table-column align="center" label="數(shù)值" 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()
      })
      
    },
    /** 校驗(yàn)內(nèi)容 */
    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)
    },
    /** 失去焦點(diǎn) */
    blurHandle(event, row) {
      const value = event.target.value
      row.value = this.validateAssetValue(value)
      this.tableCurrent = null
    },
    /** 在組件中使用千分符 */
    toFormatMoney(value) {
      // 網(wǎng)上有很多教程，自行查閱
    },
    /** 計(jì)算合計(jì) */
    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] = `合計(jì)： ${formatTotal} 元`
        } else {
          sums[index] = ''
        }
      });
      return sums;
    },
  }
}
</script>

到了這里，關(guān)于elementui el-input輸入框金額顯示 千分符與輸入框 金額輸入框 表格或列表中的金額輸入框的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！