The tab is nested in the form form, and the validation rules are bound

a html

[Note: :prop must be bound to the data path of the form all the time]

<el-form
        ref="dataForm"
        :rules="rules"
        :model="temp" 
        label-position="right"
        label-width="110px"
      >
  <el-row> 
    <el-col :span="8">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="temp.username" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="联系人姓名" prop="contactName">
        <el-input v-model="temp.contactName" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="联系人电话" prop="contactMobile">
        <el-input v-model="temp.contactMobile" />
      </el-form-item>
    </el-col>
  </el-row> 
  <el-row type="flex" justify="start">
    <el-table :data="temp.households" border fit style="width: 100%">
      <el-table-column label="户号" prop="householdNum" min-width="100">
        <template slot-scope="scope">
          <el-form-item
            class="table-form-item"
            :prop="'households[' + scope.$index + '].householdNum'"
            :rules="rules.householdNum"
          >
            <el-input
              @input="validInputNum(scope.row.householdNum, scope.$index)"
              v-model="scope.row.householdNum"
              maxlength="13"
            />
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</el-form>

Two, js

 {
    
    
  temp: {
    
     
    contactMobile: "", 
    contactName: "",
    households: [
      {
    
    
        
        householdNum: "",
      
      },
    ], 
    username: "",
  },
  
  rules: {
    
    
    username: [
      {
    
     required: true, message: "用户名不能为空", trigger: "change" },
    ],
    contactName: [
      {
    
     required: true, message: "联系人姓名不能为空", trigger: "change" },
    ],
    contactMobile: [
      {
    
     required: true, message: "联系人电话不能为空", trigger: "change" },
    ],   
    householdNum: [
      {
    
     required: true, message: "户号不能为空!", trigger: "change" },

      {
    
    
        required: true,
        message: "户号长度只能为13",
        validator: (rule, value, callback) => {
    
    
          if (value.length === 13) {
    
    
            callback();
          } else {
    
    
            callback(new Error("请输入数字"));
          }
        },
        trigger: "change",
      },
    ],
  },
};
   

three css

.table-form-item > .el-form-item__content {
    
    
    margin-left: 0 !important;//注释掉不符合规则时的红色提示文字的高度
  }

Guess you like

Origin blog.csdn.net/weixin_40507164/article/details/124735253