vue / element ui表单验证

Question

我有一个表，里面有可变数量的行。我想基于同一行上的更新日期值来验证我的评论输入值。如何在验证规则中引用该更新日期值？我尝试过这种方法，但是不起作用。 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

我正在使用error的{​​{1}}道具-对我来说，它比验证规则更强大：

el-form-item

<!-- 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()函数负责整个表的验证-在我的情况下，如果表为空，它将打印错误。