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