v-for循环生成el-input带rules验证

功能介绍：利用v-for循环批量生成el-input组件，并对指定el-input带rules验证。

1、template

<el-form
  :model="searchForm"
  :rules="rules"
  ref="ruleForm"
  label-width="100px"
>
  <div v-for="(item, index) in searchForm.list" :key="index">
    <el-form-item
      :label="item.label"
      :prop="'list.' + index + '.value'"
      :rules="item.rules.value"
    >
      <el-input
        v-model="item.value"
        :placeholder="item.placeHolder"
      ></el-input>
    </el-form-item>
  </div>
</el-form>

2、data

data() {
  return {
    searchForm: {
      list: [
        {
          index: 1,
          value: "",
          label: "名称：",
          placeHolder: "请输入",
          rules: {
            value: [
              { required: true, message: "请输入名称", trigger: "blur" }
            ]
          }
        },
        {
          index: 2,
          value: "",
          label: "年龄：",
          placeHolder: "请输入",
          rules: {
            value: [{ required: false }]
          }
        },
        {
          index: 1,
          value: "",
          label: "身份证号：",
          placeHolder: "请输入",
          rules: {
            value: [
              { required: true, message: "请输入身份证号", trigger: "blur" }
            ]
          }
        }
      ]
    },
    rules: {}
  }
}

以上是编程学习网小编为您介绍的“v-for循环生成el-input带rules验证”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。