elementUi form表单动态数据表单校验问题

ThirteenC

已于 2023-04-14 15:12:11 修改

阅读量146

点赞数

文章标签： javascript html vue.js

于 2023-04-12 18:09:37 首次发布

本文链接：https://blog.csdn.net/ThirteenC/article/details/130113379

版权

elementUi form表单动态数据表单校验问题

项目中遇到表单可新增多项内容的需求，记录下动态数据表单的表单验证问题

DOM
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <div v-for="(item, index) in ruleForm.list" :key="index">
        <el-form-item
          label="名称"
          :prop="`list.${index}.name`"
          :rules="rules.name"
        >
          <el-input v-model="item.name"></el-input>
        </el-form-item>
      </div>
    </el-form>

<script>
export default {
  data() {
    return {
      ruleForm: {
        list: [{ name: "" }, { name: "" }],
      },
      rules: {
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
      },
    };
  }
};
</script>