vue/element ui 表单验证

Question

我有一个 table，里面的行数是可变的。我想根据同一行的更新日期值验证我的评论输入值。我如何在验证规则中引用该更新日期值？我已经尝试过这种方法，但它不起作用。请参阅下面的 table 以了解 el-table 布局。

 handleSubmit() {
        this.$refs['tableData'].validate((valid) => {
            if (valid) {
                this.$axios
                .post('/report/update_parts', {
                    data: this.tableData,
                    token: encodeURIComponent(this.$route.params.token)
                })
                .then(response => {
                if (response.data.state == '200') {
                //  this.$message.success(response.data.msg)
                    this.handleClose()
                }
                else {
                    this.$message.warning(response.data.msg)
                }
                })
                .catch(response => {
                this.$message.error('Failed Connecting Server')
                })
            }
        })
    },
    
 checkDate(idx) {
  if (idx.row.updated_date) {
      return !idx.row.comments ? 'Mandatory comments' : ''
  }
}

 <el-form label-position="right" status-icon :model="ruleForm" ref="ruleForm">
                        <el-table ref="tableData" size="small" :data="tableData" stripe border height="70vh" style="width: 100%">›
                        <el-table-column label="UPDATED DATE" prop="updated_date" header-align="center" width="140px" fixed="right">>
                            <template slot-scope="scope1">
                                <el-form-item prop="updated_date">
                                    <el-date-picker
                                    v-model="scope1.row.updated_date"
                                    type="date"
                                    placeholder="Select Date"
                                    format="MM-dd-yyyy"
                                    value-format="MM-dd-yyyy">
                                    </el-date-picker>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="Comments" prop="comments" header-align="center" min-width="140px" fixed="right">
                            <template slot-scope="scope">
                                <el-form-item prop="comments" :error="checkDate(scope)">
                                    <el-input v-model="scope.row.comments"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        </el-table>
                    </el-form>
                    
                <div class="update-button">
                    <el-button type="warning" @click="handleCancel">Cancel</el-button>
                    <el-button type="primary" @click="handleSubmit">Submit</el-button>
                </div>

Answer 1

我正在使用 el-form-item 的 error 道具 - 它看起来比验证规则更可靠：

    <!-- Schedules -->
    <el-form-item :error="checkSchedule">
      <el-table :data="courseForm.schedules" header-row-class-name="schedules-table-header" class="schedules-table">
        <el-table-column label="Day" align="center" width="65">
          <template slot-scope="tbl">
            {{ 1 + tbl.$index }}
          </template>
        </el-table-column>
        <el-table-column label="Date" align="center">
          <template slot-scope="tbl">
            <el-form-item :error="checkDatum(tbl)">
              <el-date-picker
                v-model="tbl.row.datum"
                :picker-options="{firstDayOfWeek: 1, disabledDate: disabledDate}"
                :editable="false"
                class="course-param-label"
                format="d MMM yyyy"
                placeholder="dd/mm/yyyy"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="Start time" align="center">
          <template slot-scope="tbl">
            <el-form-item>
              <el-time-select
                v-model="tbl.row.time_start"
                :picker-options="{firstDayOfWeek: 1, start: '05:30', step: '00:30', end: '22:00', maxTime: tbl.row.time_stop || '22:00'}"
                :editable="false"
                class="course-param-label"
                format="HH:mm"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="End time" align="center">
          <template slot-scope="tbl">
            <el-form-item>
              <el-time-select
                v-model="tbl.row.time_stop"
                :picker-options="{firstDayOfWeek: 1, start: '05:30', step: '00:30', end: '22:00', minTime: tbl.row.time_start || '05:30'}"
                :editable="false"
                class="course-param-label"
                format="HH:mm"
              />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item> 

<script>
  computed:
  {
      checkSchedule()
      {
        const sched = this.courseForm.schedules;
        return sched && sched.length > 0 ? '' : 'Empty course schedule';
      }, 
  },
  methods:
  {
      disabledDate(d)
      {
        if (!d) return true;
        const t = d.getTime();
        return this.courseForm.schedules.findIndex(item => item.datum && item.datum.getTime() === t) !== -1;
      },
      checkDatum(idx)
      {
        return !this.courseForm.schedules[idx].datum ? 'Missing date' : '';
      }, 
  }
</script>

checkDatum() 函数接收当前行，因此它可以检查相关列的值和 return 正确的错误消息（如果没有错误则为空字符串）。 checkSchedule() 函数负责作为一个整体验证 table - 在我的例子中，如果 table 为空，它会打印错误。

vue/element ui 表单验证

vue/element ui form validation

vue.js

element-ui