1. Implementation ideas
When the user does not perform any processing on the input box, the value will be converted into the form of a thousand separator, such as 12,345.67 format. When the user clicks on the amount to enter and modify the operation, the displayed value will be in the form of 12345.67, and the user is prohibited from entering Chinese, For English, special symbols, English commas, etc., only numbers, one decimal point, and two decimal places can be entered; when modifying the content of the input box, the total value of the form will be updated.
2. Screenshot effect
3. Implement the code
<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>