给表格中的input框添加校验

给表格中的input框添加校验

<div id="app">
      <el-form class="base-form" ref="baseForm" :model="baseForm" :rules="rules" auto-complete="on">
        <el-table ref="table-input" class="table" highlight-current-row :data="baseForm.demoList">
          <el-table-column label="姓名" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.name'" :rules="rules.name" class="all">
                <el-input v-model="scope.row.name" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.name`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="年龄" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.age'" :rules="rules.age" class="all">
                <el-input v-model="scope.row.age" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.age`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="出生日期" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.birthday'" :rules="rules.birthday" class="all">
                <el-date-picker placeholder="请选择" v-model="scope.row.birthday" format="yyyy-MM-dd" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.birthday`)"></el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="详细地址" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.address'" :rules="rules.address" class="all">
                <el-input v-model="scope.row.address" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.address`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div class="flex-c-a margin-top-10">
        <el-button @click="submit">提交</el-button>
      </div>
    </div>

 baseForm: {
    
    
               demoList: [
                {
    
    
                  name: "",
                  age: "",
                  birthday: "",
                  address: ""
                }
                ]
            },
            index: 0,
            rules: {
    
    
              name: [
                {
    
    
                  required: true,
                  message: "请输入姓名",
                  trigger: "blur"
                }
              ],
              age: [
                {
    
     required: true, message: "请输入年龄", trigger: "blur" }
              ],
              birthday: [
                {
    
     required: true, message: "请选择出生日期", trigger: "change" }
              ],
              address: [
                {
    
     required: true, message: "请输入详细地址", trigger: "blur" }
              ],
            }

// 提交核对账目
submit() {
    
    
    this.$refs.baseForm.validate((valid) => {
    
    
         if (valid) {
    
    
            this.$confirm("您确定【提交】？", "提示", {
    
    
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
            }).then(() => {
    
    
               console.log("校验通过")
            })
         }
     })
}

  .all {
    
    
    width: 100%;
  }
  .flex-c-a {
    
    
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .margin-top-10 {
    
    
    margin-top: 10px;
  }
  .base-form.el-form-item__content {
    
    
    margin-left: 0;
  }

原文地址：https://www.codetd.com/article/13722929