element-ui的el-table和el-form表单校验嵌套使用

最新推荐文章于 2025-05-22 17:20:34 发布

励公子

最新推荐文章于 2025-05-22 17:20:34 发布

阅读量1.8w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： table form element-ui

本文链接：https://blog.youkuaiyun.com/xing_zlear/article/details/91127520

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍在Element UI框架中，如何正确处理表格内嵌套表单的动态验证问题，确保每个输入项都能独立验证，避免静态prop导致的错误提示无法消除。通过使用动态prop和为每个el-form-item配置rules属性，实现对SN、品牌名称和高度等字段的有效校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目有遇到table中嵌套form，并且带有表单验证的需求，效果图如下：
在这里插入图片描述
刚开始el-form-item定义了静态prop（prop=“sn”），结果input填入值后错误提示一直存在，自定义校验的value也为undefined，然后经百度大神提点，得知出错在prop

⚠️应该写动态prop保证唯一性。

:prop="'monitorData.' + scope.$index + '.sn'"

⚠️不只是el-form才配置，每一个el-form-item都要配置rules属性

<el-form :model="monitorForm" :rules="monitorForm.monitorRules" ref="monitorForm">
  <el-table
      class="blue-theme add-virtual-table"
      empty-text="请 新增填写行 进行填写"
      :data="monitorForm.monitorData"
      style="width: 100%;">
      <el-table-column
          type="index"
          align="center"
          width="50"/>
      <el-table-column
          prop="sn"
          label="SN">
          <template slot-scope="scope">
            <el-form-item 
            	:prop="'monitorData.' + scope.$index + '.sn'" 
            	:rules="monitorForm.monitorRules.sn">
              	<el-input
              		class="light-blue-theme"
              		clearable v-model="scope.row.sn"
              		placeholder="请输入sn"/>
            </el-form-item>
          </template>
      </el-table-column>
      <el-table-column
          label="品牌">
          <template slot-scope="scope">
              <el-form-item
              	  :prop="'monitorData.' + scope.$index + '.type'"
              	  :rules="monitorForm.monitorRules.type">
                  <el-input 
                  	  class="light-blue-theme" 
                  	  v-model="scope.row.type" 
                  	  placeholder="请输入品牌名称"/>
              </el-form-item>
          </template>
      </el-table-column>
      <el-table-column
          label="高度"
          min-width="160">
          <template slot-scope="scope">
              <el-form-item 
                  :prop="'monitorData.' + scope.$index + '.height'" 
                  :rules="monitorForm.monitorRules.height">
                  <el-input 
                  	  class="light-blue-theme"
                  	  v-model="scope.row.height"
                  	  placeholder="请输入高度"/>
              </el-form-item>
          </template>
      </el-table-column>
      <el-table-column
          prop="date"
          label="操作"
          width="100">
          <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete" 
                  circle
                  @click="handleDeleteRow(scope.$index, scope.row)"></el-button>
          </template>
      </el-table-column>
  </el-table>
</el-form>

data

monitorForm: {
	monitorData: [],
	monitorRules: {
	   sn: [
           { required: true, message: 'SN不能为空', trigger: 'blur' }
	   ],
	   type: [
     	   { required: true, message: '品牌名称不能为空', trigger: 'blur' }
	   ],
	   height: [
     	   { required: true, message: '高度不能为空', trigger: 'blur' }
	   ]
	}
}, // 存储表格table信息