Vue2 实现带输入的动态表格，限制el-input输入位数以及输入规则（负数、小数、整数）

Vue2 实现el-input带输入限制的动态表格，限制输入位数以及输入规则（负数、小数、整数）

在这个 Vue2 项目中，我们实现一个限制输入位数（整数16位，小数10位）以及输入规则（负数、小数、整数），并提供了处理用户输入的方法。以下是代码的解释：

var num = this.inputLimit(e, 16, 10, scope, index);

参数解释：

e: 事件对象，代表触发函数的输入事件，通常用于获取事件相关信息，如输入值。

16: 整数部分的最大允许位数，作为 intMax 在 inputLimit 函数中使用，用于限制整数部分的长度。

10: 小数部分的最大允许位数，作为 dotMax 在 inputLimit 函数中使用，用于限制小数部分的长度。

scope: 代表 Vue 模板中的 slot-scope 对象，通常用于访问表格中正在迭代的行的属性。

index: 当前迭代的循环索引，通常用于确定当前项目在数组或列表中的位置。

总结一下：

e: 输入事件对象。
16: 整数部分的最大位数。
10: 小数部分的最大位数。
scope: Vue 模板中的 slot-scope 对象，用于访问表格中的行数据。
index: 当前迭代的循环索引。
inputLimit 函数的设计旨在基于提供的约束条件（整数部分长度、小数部分长度）限制输入，并处理各种场景，如负数。返回的 num 可能是经过处理和限制的输入值。

完整代码：

<template><div class="hello"><el-table v-loading="loading" :data="versionList" height="calc(100vh - 270px)" size="small"><el-table-column label="名称" align="center" prop="name" :show-overflow-tooltip="true" width="200" /><el-table-column v-for="(item, index) in fillYear" :key="item" :label="item" align="center" :prop="item" width="200":show-overflow-tooltip="true"><template slot-scope="scope"><el-input type="text" v-model="scope.row.fillData[index].value" @change="handleInput($event, scope, index)" /></template></el-table-column></el-table></div>
</template><script>
export default {name: "HelloWorld",data() {return {loading: false,fillYear: ["2019", "2020", "2021", "2022"],versionList: [{name: "书包",fillData: [{ key: "2019", value: "" },{ key: "2020", value: "" },{ key: "2021", value: "" },{ key: "2022", value: "" },],},{name: "铅笔",fillData: [{ key: "2019", value: "" },{ key: "2020", value: "" },{ key: "2021", value: "" },{ key: "2022", value: "" },],},{name: "橡皮",fillData: [{ key: "2019", value: "" },{ key: "2020", value: "" },{ key: "2021", value: "" },{ key: "2022", value: "" },],},{name: "玩具",fillData: [{ key: "2019", value: "" },{ key: "2020", value: "" },{ key: "2021", value: "" },{ key: "2022", value: "" },],},],};},methods: {handleInput(e, scope, index) {// 获取用户输入的值// let inputValue = scope.row.fillData[index].value;// 使用正则表达式检查输入值是否为数字或小数// let regex = /^[0-9]+(\.[0-9]{0,2})?$/;// 如果不匹配正则表达式，则清除非法字符// if (!regex.test(inputValue)) {//     inputValue = inputValue.replace(/[^\d.]/g, '');// 更新绑定的值//     this.$set(scope.row.fillData, index, { ...scope.row.fillData[index], value: inputValue });// }var num = this.inputLimit(e, 16, 10, scope, index);console.log(`🚀>> ${num}`)},inputLimit(num, intMax, dotMax, scope, index) {if (num === undefined || num === null) {return '0';}var next = num.toString();var hasCompany = next.startsWith('-');next = hasCompany ? next.substring(1) : next;if (next.includes('.')) {// 小数var [intNum, dotNum] = next.split('.').map(part => part.replace(/[^0-9]/g, ''));next = `${intNum}.${dotNum}`;this.$set(scope.row.fillData, index, { ...scope.row.fillData[index], value: `${hasCompany ? '-' : ''}${next}` });} else {// 非小数next = next.replace(/[^0-9]/g, '');this.$set(scope.row.fillData, index, { ...scope.row.fillData[index], value: `${hasCompany ? '-' : ''}${next}` });}if (Number(next)) {var resNum = '';if (next.includes('.')) {var [intPart, dotPart] = next.split('.');// 限制整数位数16、小数10位intPart = intPart.substring(0, intMax);dotPart = dotPart.substring(0, dotMax);resNum = Number(`${intPart}.${dotPart}`).toFixed(dotPart.length);} else {resNum = next.substring(0, intMax);}this.$set(scope.row.fillData, index, { ...scope.row.fillData[index], value: `${hasCompany ? '-' : ''}${resNum}` });return resNum;}return '0';},},created() {console.log(this.versionList);},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

效果图如下：
输入非整数、小数、负数，且包含其他字符或非法数字的，change事件之后会处理为正常的数据