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事件之后会处理为正常的数据