Блог

У меня есть таблица, внутри которой переменное количество строк. Я хочу проверить мое входное значение комментариев на основе значения даты обновления в той же строке. Как я могу ссылаться на это значение даты обновления в правилах проверки? Я пробовал этот метод, но он не работает. Пожалуйста, смотрите таблицу ниже для макета el-таблицы.

  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>  

Я использую error prop of 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 amp;amp; 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 amp;amp; item.datum.getTime() === t) !== -1;
      },
      checkDatum(idx)
      {
        return !this.courseForm.schedules[idx].datum ? 'Missing date' : '';
      }, 
  }
</script>
  

checkDatum() Функция получает текущую строку, чтобы она могла проверить, каково значение связанных столбцов, и вернуть соответствующее сообщение об ошибке (или пустую строку, если ошибки нет).
checkSchedule() Функция отвечает за проверку таблицы в целом — в моем случае она выводит сообщение об ошибке, если таблица пуста.