el-form-item循环验证

785 阅读1分钟

开发时遇到当el-form-item的数据是循环的时候,需要每一项添加验证规则,且只能输入数字和小数

<el-row :gutter="20" v-if="enterprise.baseTopics.length !== 0">
  <el-col
    :span="12"
    v-for="(item, index) in enterprise.baseTopics"
    :key="index"
  >
    <el-form-item
      :label="item.name"
      :prop="`baseTopics.${index}.value`"
      :rules="[
        {
          trigger: 'blur',
          pattern: /^[0-9]+(.[0-9]+)?$/, //验证只能输入小数和数字
          message: `请输入数字或小数`,   
        },
      ]"
    >
      <el-input
        type="text"
        :placeholder="'请输入' + item.name"
        v-model="item.value"
      >
        <template slot="append">{{ item.unit }}</template>
      </el-input>
    </el-form-item>
  </el-col>
</el-row>