解决Element-ui input限制输入数字时先输入汉字后无法绑定的问题

在 Element UI 的 el-input 组件中，如果使用正则表达式来限制只允许输入正整数，可能会出现先输入汉字再输入数字时，后续的数字输入无法被记录到 v-model 绑定的数据中的问题。

这是因为输入汉字时，el-input 组件的 v-model 绑定的值会被设置为汉字，而后续的数字输入并不会对其进行覆盖。因此，需要对输入框进行进一步的处理，以确保输入框始终只包含正整数。

以下是一个解决方案：

<template>
  <el-input v-model="inputValue" @input="handleInput"></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    handleInput(value) {
      // 使用正则表达式验证输入值是否为正整数
      const pattern = /^[1-9]\d*$/;
      if (pattern.test(value)) {
        // 如果输入值为正整数，则直接将其赋值给 inputValue
        this.inputValue = value;
      } else {
        // 如果输入值不为正整数，则从中提取出数字，并将其拼接为一个字符串后赋值给 inputValue
        const num = value.match(/\d+/g);
        this.inputValue = num ? num.join("") : "";
      }
    },
  },
};
</script>

在上面的示例代码中，我们在 el-input 组件上监听了 input 事件，并使用 handleInput 方法来处理输入。在该方法中，我们首先使用正则表达式来验证输入值是否为正整数。如果输入值为正整数，则直接将其赋值给 inputValue。否则，我们使用 match 方法从输入值中提取出数字，并使用 join 方法将其拼接为一个字符串。最后，将该字符串赋值给 inputValue。

这样，无论用户输入什么内容，我们都可以通过处理确保 inputValue 中始终只包含正整数。