el-input 循环绑值,输入空支持输入数字,小数校验

`el-input` 是 Element UI 提供的一个基于 Vue.js 的输入组件，常用于表单中。如果你想在循环结构中绑定多个 `el-input` ，并允许用户输入数字和小数，可以按照以下步骤操作：

1. 首先，在模板中，使用 `v-for` 指令来创建一个数组的复制品，并将每个元素绑定到一个独立的 `el-input` 组件上：

<template>
  <div>
    <el-form v-for="(item, index) in items" :key="index">
      <el-form-item label="编号{{ index + 1 }}">
        <el-input v-model="item.value" type="number" placeholder="请输入数字或小数"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

这里的 `items` 是一个包含对象的数组，比如 `{ value: null }`，表示初始为空。

2. 确保数据模型 `items` 中的每个 `value` 字段是双向绑定的，Vue会在用户输入时自动更新。

3. 对于小数验证，Element UI 的 `el-input` 并未直接提供小数验证功能。你可以自定义一个验证函数，如在 `watch` 或者 `input` 事件处理器里检查输入是否满足小数格式，然后显示相应的错误消息。例如：

<script>
export default {
  data() {
    return {
      items: [{ value: null }]
    };
  },
  watch: {
    // 假设你的 min 和 max 数字限制已经存在
    'items.$model.$children.value': function(value, oldValue) {
      if (isNaN(value) || (value !== null && !value.toString().includes('.'))) {
        this.$refs.form.validateField('input' + this.items.indexOf(item)); // 更新指定字段的验证状态
        // 添加你的错误提示逻辑，比如设置一个 computed property
        this.$set(this.items, this.items.indexOf(item), { ...this.items[this.items.indexOf(item)], validationError: '只能输入数字和小数' });
      }
    }
  }
};
</script>

记得在模板中添加错误提示部分，以便当验证失败时显示错误信息。