element表单之动态数据循环的表单验证

最新推荐文章于 2024-05-23 16:08:37 发布

初心w50t2

最新推荐文章于 2024-05-23 16:08:37 发布

阅读量130

点赞数 2

分类专栏： VUE 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_41910413/article/details/136391790

版权

VUE 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<template>  	
	<el-form ref="form" label-width="60px" :model="formData" :rules="rules">
	   <div v-for="(item, index) in formData.navigationBar" :key="item.code">
	      <el-form-item
	        label="标题名称"
	        :prop="'navigationBar.' + index + '.title'"
	        :rules="rules.title"
	      >
	        <el-input v-model="item.title" clearable placeholder="请输入" />
	      </el-form-item>
	   </div>
    </el-form>	
</template>
<script>
export default {
  data() {
    return {
      // 绑定数据
      formData: {
        navigationBar: []
      },
      // 校验规则
      rules: {
        title: [{ required: true, message: "标题名称" }]
      },
    };
  },
</script>