表格内日期比较计算

需求：在表格中新增数据，计算开始日期中最早的和结束日期中最晚的，回显到下方。在这里插入图片描述

  <el-formref="formRef":model="ruleForm":rules="rules"style="margin-top: 20px;"label-position="top"><el-button style="margin:10px 0" :disabled="disabledEdit" @click="handleAddList">新增</el-button><el-table :data="ruleForm.tableData" border style="width: 100%"><el-table-column label=""><template slot="header"><span class="required">*</span>开始日期</template><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.startDate'" :rules="[{required: true, row:scope.row, validator:validStartDate, trigger: 'change'}]" label=""><el-date-pickerv-model="scope.row.startDate":disabled="disabledEdit"type="date"value-format="yyyy-MM-dd"placeholder="选择日期"@change="handleStartDate(scope.$index)"style="width: 100%;"></el-date-picker></el-form-item></template></el-table-column><el-table-column label=""><template slot="header"><span class="required">*</span>结束日期</template><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.endDate'" :rules="[{required: true, row:scope.row, validator:validEndDate, trigger: 'change'}]" label=""><el-date-pickerv-model="scope.row.endDate":disabled="disabledEdit"type="date"value-format="yyyy-MM-dd"placeholder="选择日期"@change="handleEndDate(scope.$index)"style="width: 100%;"></el-date-picker></el-form-item></template></el-table-column><el-table-column label="操作" width="80"><template slot-scope="scope"><el-form-item label=""><el-buttonsize="mini"type="text":disabled="disabledEdit"class="required"@click.stop="handleDelTable(scope.$index)">删除</el-button></el-form-item></template></el-table-column></el-table><section><el-form-item label="开始时间">{{ ruleForm.startDate?.substring?.(0,10) }}</el-form-item><el-form-item label="结束时间">{{ ruleForm.endDate?.substring?.(0,10) }}</el-form-item></section></el-form>

  data() {return {ruleForm: {tableData: [],startDate:"",endDate:"",},rules:[],}},methods: {//开始日期validStartDate(rule, value, callback) {let row = rule.rowif(!row.startDate) {callback(new Error("开始日期不能为空"))} else if(row.endDate&&value&&new Date(value) > new Date(row.endDate)) {callback(new Error("开始日期不能大于结束日期"))}else{callback()}},//结束日期validEndDate(rule, value, callback) {let row = rule.rowif(!row.endDate) {callback(new Error("结束日期不能为空"))} else if(row.startDate&&value&&new Date(row.startDate) > new Date(value)) {callback(new Error("结束日期不能小于开始日期"))}else{callback()}},// 日期大小比较compare(attr, rev) {rev = (rev || typeof rev === 'undefined') ? 1 : -1;return (a, b) => {a = a[attr];b = b[attr];if (a < b) { return rev * -1; }if (a > b) { return rev * 1; }return 0;};},handleStartDate(i) {if(!this.ruleForm.tableData.length) {this.ruleForm.startDate = ''} else {let arr = this.ruleForm.tableData.filter(item=>{return item.startDate !== null})const DESC = arr.sort(this.compare("startDate", true)); // 降序this.ruleForm.startDate = !arr.length ? '' : this.newDate(DESC[0].startDate)this.$refs.formRef.validateField('tableData.' + i + '.endDate');}},handleEndDate(i) {if(!this.ruleForm.tableData.length) {this.ruleForm.endDate = ''} else {let arr = this.ruleForm.tableData.filter(item=>{return item.endDate !== null})const DESC = arr.sort(this.compare("endDate", false)); // 降序this.ruleForm.endDate = !arr.length ? '' : this.newDate(DESC[0].endDate)this.$refs.formRef.validateField('tableData.' + i + '.startDate');}},// 中国标准时间转为年月日newDate(time) {var date = new Date(time)var y = date.getFullYear()var m = date.getMonth() + 1m = m < 10 ? '0' + m : mvar d = date.getDate()d = d < 10 ? '0' + d : dreturn y + '-' + m + '-' + d},// 新增handleAddList() {this.ruleForm.tableData.push({id: this.$route.query.id * 1,content: '', startDate: '', endDate: '', responsible: '',})},// 删除handleDelTable(index) {this.ruleForm.tableData.splice(index,1 )this.handleStartDate()this.handleEndDate()},    },