vue el-input只允许输入整数或小数只保留小数点后两位 并设置最大值

Question

el-input只允许输入整数或小数只保留小数点后两位 并设置最大值

这里的输入框是动态生成的，所以搞不好了，目前实现的功能是最大值是30，只能输入整数，但是现在没法输入小数了 我需要保留一位小数

这是我实现的，但是输入不了小数

Answer 1

TechWhizKid参考GPT回答：

Element UI的el-input组件，用v-model绑定来进行输入控制，但对于你所要的特殊规则（只允许输入整数或者小数并只保留小数点后两位，并设置最大值），要结合watch或者computed属性来进行处理。

这里有个示例，假设最大值是100：

<el-form :model="DailyForm.others">
  <div v-for="(item, index) in DailyForm.others" :key="index">
    <el-form-item label="Others">
      <el-input
        v-model="item.others"
        style="width:230px"
        @input="validateInput(index)"
        :maxlength="item.others.length > 0 && item.others.indexOf('.') !== -1 ? 5 : 3"
        placeholder="请输入数字"
      />
    </el-form-item>
    <e1-form-item label-"Remarks">
      <el-input v-model-"item.remarks"/>
    </el-form-item>
    <el-form-item>
      <el-button @click="deleteotherItem(index)"type="danger"> Delete
      </e1-button>
    </el-form-item>
    <hr />
  </div>
</el-form>

对应的JavaScript：

export default {
  data() {
    return {
      DailyForm: {
        others: [
          { others: '', remarks: '' },
          // ...其他数据
        ]
      }
    };
  },
  methods: {
    validateInput(index) {
      let value = this.DailyForm.others[index].others;
      value = value.toString();
      if (!/^\d+(\.\d{0,2})?$/.test(value) || Number(value) > 100) {
        this.DailyForm.others[index].others = value.slice(0, -1);
      }
    },
    deleteotherItem(index) {
      // 删除操作
      this.DailyForm.others.splice(index, 1);
    },
  },
};

• 每次当el-input的值变动时，会调用validateInput方法。方法会检查输入的值是否符合规定的模式（是否是整数或者小数，并且最多只有两位小数）以及是否超过了最大值（这里假设为100）。如果不符合这些规则，那么就会删除最后一个字符，即撤销最近的输入。