el-form表单中el-form-item嵌套表格嵌套表单校验

 <el-col :span="24">
          <el-form-item label="客户基地" prop="customerBase">
          </el-form-item>
          <el-table :data="formData.customerBase" style="width: 100%">
            <el-table-column label="序号" type="index" align="center"></el-table-column>
            <el-table-column label="基地名称" align="center">
              <template #default="scope">
                <el-form-item :prop="'customerBase.' + scope.$index + '.baseName'" :rules='cusBaseRule.baseName'
                  :validate-on-rule-change="false">
                  <el-input v-model="scope.row.baseName" align="center" style="width: 100%;"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
  rules: {
        num: { required: true, message: "请输入客户编号", trigger: ["blur", "change"] },
        name: { required: true, message: "请输入客户全称", trigger: ["blur", "change"] },
        isTogger: { required: true, message: "请选择", trigger: ["blur", "change"] },
        lowname: { required: true, message: "请输入客户简称", trigger: ["blur", "change"] },
        customerBase: { required: true, message: "请输入客户基地", trigger: ["blur", "change"] }
      },
      cusBaseRule: {
        baseName: { required: true, message: "请输入基地全称", trigger: ["blur", "change"] }
      }

1.首先,最外层的客户基地校验绑的是下面的表格,直接写rules里

2.表格中的输入框校验写在cusBaseRule中,其中它的prop看代码,直接用他绑定字段里的v-model的字段

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用`el-form`表单组件嵌套另一个`el-form`表单组件。这种嵌套可以用于更复杂的表单布局和组织。 以下是一个示例代码,演示了如何嵌套`el-form`表单: ```vue <template> <el-form ref="outerForm" :model="outerForm" label-width="100px"> <el-form-item label="外层表单项"> <el-input v-model="outerForm.field1"></el-input> </el-form-item> <el-form ref="innerForm" :model="innerForm" label-width="100px"> <el-form-item label="内层表单项"> <el-input v-model="innerForm.field2"></el-input> </el-form-item> </el-form> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { outerForm: { field1: '' }, innerForm: { field2: '' } }; }, methods: { submitForm() { this.$refs.outerForm.validate((validOuterForm) => { if (validOuterForm) { // 外层表单校验通过 this.$refs.innerForm.validate((validInnerForm) => { if (validInnerForm) { // 内层表单校验通过,提交数据 console.log(this.outerForm); console.log(this.innerForm); } else { // 内层表单校验不通过 return false; } }); } else { // 外层表单校验不通过 return false; } }); } } }; </script> ``` 在上面的示例,外层表单和内层表单都使用了`el-form`组件,并且分别定义了自己的数据模型(`outerForm`和`innerForm`)。你可以根据实际需要添加更多的表单项。 请注意,在提交表单时,需要先校验外层表单的有效性,然后再校验内层表单的有效性。只有当两个表单校验通过时,才会提交数据。 希望这个例子对你有所帮助!如果你还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值