表单里面嵌套表格之后，如何对表格里面的input框进行表单验证_$.validator 表单里面嵌套表格,并对表格里面的内容进行表单验证-CSDN博客

本文链接：https://blog.csdn.net/csdnyp/article/details/119666985

本文介绍如何在Vue项目中，通过el-form和el-table结合，实现实时编辑的ERP联系人表格，展示了如何绑定数据、验证输入和动态显示/隐藏字段。

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

如图所示：

示例样式

在这里插入图片描述
首先表格数据要绑定表单里面的数据。如表单addUnitForm的erpContacts数组
通过插槽的scope.$index来找到绑定的数据，即每个el-form-item的prop属性

代码：

	<el-form
          :model="addUnitForm"
          :rules="addUnitFormRules"
          ref="addUnitFormRef"
          label-width="110px"
          class="add_form scroll"
          inline="inline"
          style="max-height: 600px;"
        >
          <div class="addtable">
            <el-button type="primary" @click="addRowAdd">新增联系人</el-button>
            <el-table :data="addUnitForm.erpContacts" border stripe style="width: 1400px;max-height: 380px;" :height="380">
              <el-table-column prop="name" label="联系人" align="center" width="230">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'erpContacts.' + scope.$index + '.contactsName'"
                    :rules="[{required: true, message: '请输入联系人', trigger: 'blur'}]"
                  >
                    <el-input v-if="scope.row.edit" v-model="scope.row.contactsName" placeholder="联系人" clearable></el-input>
                    <span v-else>{{scope.row.contactsName}}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="sex" label="手机号" align="center" width="230">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'erpContacts.' + scope.$index + '.contactsPhone'"
                    :rules="[{ validator: contactCheckPhone,required: true,trigger: 'blur' }]"
                  >
                    <el-input v-if="scope.row.edit" v-model="scope.row.contactsPhone" placeholder="手机号" clearable></el-input>
                    <span v-else>{{scope.row.contactsPhone}}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="sex" label="职位" align="center" width="230">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'erpContacts.' + scope.$index + '.contactsPhone'"
                    :rules="[{required: true, message: '请输入职位', trigger: 'blur'}]"
                  >
                    <el-input v-if="scope.row.edit" v-model="scope.row.contactsJob" placeholder="职位" clearable></el-input>
                    <span v-else>{{scope.row.contactsJob}}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="sex" label="联系人备注" align="center" width="240">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-tooltip class="item" effect="dark" content="备注文字不能超过150字" placement="top-start">
                      <el-input clearable v-if="scope.row.edit" v-model="scope.row.remarks" placeholder="备注" @change='scope.row.remarks.length >= 150 ? $message.error("备注文字不能超过150字，请改正！") : null' ></el-input>
                      <span v-else>{{scope.row.remarks}}</span>
                    </el-tooltip>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="228">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-button type="danger" size="medium" @click="deleteDataAdd(scope.row,scope.$index)">
                      删除
                    </el-button>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
	</el-form>

.addtable{
  /deep/.el-input{
    width: 180px;
  }
}

//表单数据
addUnitForm:{
	//联系人表格
	erpContacts:[
		{
			contactsJob:'',
			contactsName:'',
			contactsPhone:'',
			remarks:'',
		}
	]
},