在做财务相关项目的时候，在做记录凭证需要填入金额，在对应金额单位上填入数字，因为在页面中能够进行输入有表单input，所以这里我就采用一个输入框与每一行的金额进行绑定，下面我们直接进入代码部分吧。
首先这里需要有个表格来装载数据，所以这里先展示一下样式。
<el-table>
<el-table-column prop="operation" label="备注">
<template slot-scope="scope">
<el-input
size="mini"
v-model="scope.row.remark"
placeholder="请输入备注"
></el-input>
<input
@blur="blurHandler"
@keyup="handleKeyUp"
class="hideInput"
@input="handleChangeInput"
:ref="`borrowInput${scope.row.uniId}`"
v-model="scope.row.borrowPrice"
/>
<input
@blur="blurHandler"
@keyup="handleKeyUp"
class="hideInput"
@input="handleChangeInput"
:ref="`loanInput${scope.row.uniId}`"
v-model="scope.row.loanPrice"
/>
</template>
</el-table-column>
<el-table-column label="借方金额">
<el-table-column
class="fsMini"
v-for="(item, index) in bankCountUnitList"
:key="index"
:label="item.label"
min-width="20"
:class-name="
debitBorderCols.includes(index) ? 'border-right-red' : ''
"
:label-class-name="
debitBorderCols.includes(index) ? 'border-right-red' : ''
"
>
<template slot-scope="scope">
<div
class="reference"
:class="{
activateClass: scope.row.debitAmount[index].isActive,
}"
@click="
activateInput(
'debitAmount',
scope.row.uniId,
scope.row,
scope.row.debitAmount[index]
)
"
>
{{ scope.row.debitAmount[index].value || "0" }}
</div>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="贷方金额">
<el-table-column
v-for="(item, index) in bankCountUnitList"
:key="index"
:label="item.label"
min-width="20"
:class-name="
creditBorderCols.includes(index) ? 'border-right-red' : ''
"
:label-class-name="
creditBorderCols.includes(index) ? 'border-right-red' : ''
"
>
<template slot-scope="scope">
<!-- 这里是金额列 -->
<div slot="reference">
<div
class="reference"
:class="{
activateClass: scope.row.creditAmount[index].isActive,
}"
@click="
activateInput(
'creditAmount',
scope.row.uniId,
scope.row,
scope.row.creditAmount[index]
)
"
>
{{ scope.row.creditAmount[index].value || "0" }}
</div>
</div>
</template>
</el-table-column>
</el-table-column>
</el-table>
.activateClass {
background-color: #409eff;
color: white;
position: relative;
animation: pulse 1.5s infinite;
border-radius: 3px;
box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}
@keyframes pulse {
0% {
background-color: #409eff;
box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}
50% {
background-color: #66b1ff;
box-shadow: 0 0 10px rgba(64, 158, 255, 0.8);
}
100% {
background-color: #409eff;
box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}
}
/* Add cursor blinking effect */
.activateClass::after {
content: "";
position: absolute;
right: -2px;
top: 2px;
bottom: 2px;
width: 2px;
background-color: white;
animation: blink 1s infinite;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
::v-deep .el-table__body-wrapper {
max-height: 340px;
overflow-y: auto;
}
这里表格的数据可以这样进行初始化，还有金额数组
// 表格初始数据
export const fictitiousInitialData = {
remark: "",
amount: 0,
// 借方金额
borrowPrice:"",
debitAmount: bankCountUnitList.map(() => ({
value: "",
isActive: false,
})),
// 贷方金额
creditAmount: bankCountUnitList.map(() => ({
value: "",
isActive: false,
})),
loanPrice:""
}
export const bankCountUnitList = [
{ value: '0', label: '千', multiple: 100000000000 },
{ value: '1', label: '百', multiple: 10000000000 },
{ value: '2', label: '十', multiple: 1000000000 },
{ value: '3', label: '亿', multiple: 100000000 },
{ value: '4', label: '千', multiple: 10000000 },
{ value: '5', label: '百', multiple: 1000000 },
{ value: '6', label: '十', multiple: 100000 },
{ value: '7', label: '万', multiple: 10000 },
{ value: '8', label: '千', multiple: 1000 },
{ value: '9', label: '百', multiple: 100 },
{ value: '10', label: '十', multiple: 10 },
{ value: '11', label: '元', multiple: 1 },
{ value: '12', label: '角', multiple: 0.1 },
{ value: '13', label: '分', multiple: 0.01 },
]
在页面中created生命周期函数中调用初始化数据的方法。
created() {
const rowA = this.cloneDeep(fictitiousInitialData);
const rowB = this.cloneDeep(fictitiousInitialData);
this.voucherDetailsList = [rowA, rowB];
this.voucherDetailsList.forEach((ele) => {
ele.uniId = this.generateUniqueId();
});
},
methods:{
generateUniqueId() {
// 获取当前时间戳的毫秒数，并取后4位
const timestamp = Date.now().toString().slice(-4);
// 生成2位随机数字 (00 - 99)
const random = Math.floor(Math.random() * 100)
.toString()
.padStart(2, "0");
return timestamp + random;
},
}
现在我们要一一实现样式结构上的方法，第一个就是点击了单元格要对表单进行聚焦。因为每一行表格数据都有自己对应的输入框，所以我采用了ref来获取，由于ref的唯一性，我们也要给每一行表格数据设置唯一的id，拿着这个id与ref进行拼接，保证唯一准确的拿到DOM元素。
activateInput(type, refUniId, row, typeRows) {
this.currentInputInfo.row = row;
this.currentInputInfo.type = type;
this.currentInputInfo.refUniId = refUniId;
if (type === "debitAmount") {
if (this.whetherOtherParty(row, type)) {
return this.$message.warning("当前不能在这里输入值");
}
this.$refs[`borrowInput${refUniId}`].focus();
// 默认定位到元位(11)，如有小数则定位到角/分
row[type].forEach((cell) => (cell.isActive = false));
const valStr = row.borrowPrice != null ? String(row.borrowPrice) : "";
if (valStr && valStr.includes(".")) {
const dec = valStr.split(".")[1] || "";
row[type][dec.length >= 2 ? 13 : 12].isActive = true;
} else {
row[type][11].isActive = true;
}
} else {
if (this.whetherOtherParty(row, type)) {
return this.$message.warning("当前不能在这里输入值");
}
this.$refs[`loanInput${refUniId}`].focus();
// 默认定位到元位(11)，如有小数则定位到角/分
row[type].forEach((cell) => (cell.isActive = false));
const valStr = row.loanPrice != null ? String(row.loanPrice) : "";
if (valStr && valStr.includes(".")) {
const dec = valStr.split(".")[1] || "";
row[type][dec.length >= 2 ? 13 : 12].isActive = true;
} else {
row[type][11].isActive = true;
}
}
},
// 这里是判断另外一端是否输入了值
whetherOtherParty(row, sourceType) {
const targetType =
sourceType === "debitAmount" ? "creditAmount" : "debitAmount";
const source = row[sourceType];
const target = row[targetType];
if (!Array.isArray(source) || !Array.isArray(target))
throw new Error("借贷数据被破坏");
return target.some((item) => item.value !== "0" && item.value !== "");
},
以上就是一开始点击了单元格要进行输入数据了，然后我们要对输入数据的时候添加事件方法，进一步进行校验。
// 失去焦点触发
blurHandler() {
const { row, type } = this.currentInputInfo;
if (type === "debitAmount") {
row.debitAmount.forEach((item) => {
item.isActive = false;
});
} else {
row.creditAmount.forEach((ele) => {
ele.isActive = false;
});
}
},
handleKeyUp(e) {
if (e.code === "ArrowLeft") {
// 按下了右边箭头，光标需要向左边移动
this.arrowMove("-");
} else if (e.code === "ArrowRight") {
// 按下了右边箭头，光标需要向右边移动
this.arrowMove("+");
}
},
arrowMove(operation) {
const { row, type } = this.currentInputInfo;
const activeIndex = row[type].findIndex((item) => item.isActive);
row[type].forEach((item) => {
item.isActive = false;
});
if (operation == "-") {
if (activeIndex <= 0) {
row[type][0].isActive = true;
return this.$message.warning("已经到底了");
}
row[type][activeIndex - 1].isActive = true;
} else {
if (activeIndex >= 13) {
row[type][13].isActive = true;
return this.$message.warning("已经到底了");
}
row[type][activeIndex + 1].isActive = true;
}
},
handleChangeInput(event) {
let data = event.target.value;
const { row, type } = this.currentInputInfo;
try {
if (data == "") {
return this.resetInputValue(type, row);
}
if (isNaN(data) || !isFinite(data) || data < 0) {
this.$message.warning("请输入有效的非负整数");
return this.resetInputValue(type, row);
}
if (data > Number.MAX_SAFE_INTEGER) {
this.resetInputValue(type, row);
return this.$message.error("计算结果超出安全范围，请检查输入");
}
const [integerPart, decimalPart] = data.toString().split(".");
if (decimalPart != undefined && decimalPart.length > 2) {
this.$message.error("小数部分超过2位");
return this.resetInputValue(type, row);
}
if (decimalPart != undefined) {
this.currentInputLength = data.toString().length - 1;
} else {
if (data.toString().length > 12) {
this.resetInputValue(type, row);
return this.$message.error("计算结果超出安全范围，请检查输入");
}
this.currentInputLength = data.toString().length;
}
// console.log("当前输入长度为:",this.currentInputLength);
// 将数组转换成14位数组
let allDigits = this.amountConvertStrArr(data);
// 在这里直接替换掉原来的数据
this.replaceValue(row[type], allDigits);
// 验证结果，确保所有值都在0-9范围内
this.validateAndNormalize(row[type]);
// this.$message.success("金额计算完成")
let amountArr = row[type].map((ele) => {
return ele.value;
});
row.amount = this.arrayToNumber(amountArr);
// 根据输入框光标位置，同步高亮到对应列
this.setActiveByCaret(event, type, row);
} catch (e) {
console.error(e);
this.$message.error("运算出错，请重试");
}
},
// 输入出错重置输入框值
resetInputValue(type, row) {
let defaultArray = bankCountUnitList.map(() => "");
if (type === "debitAmount") {
row.borrowPrice = "";
} else {
row.loanPrice = "";
}
this.replaceValue(row[type], defaultArray);
},
amountConvertStrArr (calculateValue) {
const MAX_INTEGER_DIGITS = 12
const DECIMAL_PLACES = 2
let calculateStr = decimalToFixed(
calculateValue,
DECIMAL_PLACES
).toString()
let [integerPart = "0", decimalPart = ""] = calculateStr.split(".")
// 第四步：准备数字数组（右对齐）
// 整数部分：右对齐到12位，前面补0
let integerDigits = integerPart
.padStart(MAX_INTEGER_DIGITS, "0")
.split("")
.map(Number)
// 小数部分：右对齐到2位，后面补0
let decimalDigits = (decimalPart + "0".repeat(DECIMAL_PLACES))
.slice(0, DECIMAL_PLACES)
.split("")
.map(Number)
// 合并所有数字（整数12位 + 小数2位 = 14位）
return [...integerDigits, ...decimalDigits]
},
// 根据输入框的光标位置(selectionStart)设置高亮列
setActiveByCaret(event, type, row) {
const inputEl = event && event.target;
const value = inputEl && typeof inputEl.value === "string" ? inputEl.value : "";
const caret = inputEl && typeof inputEl.selectionStart === "number" ? inputEl.selectionStart : value.length;
// 清空激活
row[type].forEach((cell) => {
cell.isActive = false;
});
if (!value) {
row[type][11].isActive = true;
return;
}
const dotIndex = value.indexOf(".");
if (dotIndex === -1 || caret <= dotIndex) {
// 整数部分
const intLen = dotIndex === -1 ? value.length : dotIndex;
const k = Math.max(0, Math.min(caret, intLen));
let index = 11 - (intLen - k);
if (index < 0) index = 0;
if (index > 11) index = 11;
row[type][index].isActive = true;
} else {
// 小数部分：角(12)、分(13)
const decPos = Math.max(0, Math.min(caret - dotIndex - 1, 2));
const index = decPos === 0 ? 12 : 13;
row[type][index].isActive = true;
}
},
通过以上校验以及事件触发就能完成表格中的单元格能够跟输入框的光标对应上，做出一个在表格单元格中模拟输入框输入的效果了。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
