西宁网站建设电话,网站原型,北京网站建设公司,开家网站建设培训学校需求#xff1a;在表格中新增数据#xff0c;计算开始日期中最早的和结束日期中最晚的#xff0c;回显到下方。 el-formrefformRef:modelruleForm:rulesrulesstylemargin-top: 20px;label-positiontop…需求在表格中新增数据计算开始日期中最早的和结束日期中最晚的回显到下方。 el-formrefformRef:modelruleForm:rulesrulesstylemargin-top: 20px;label-positiontopel-button stylemargin:10px 0 :disableddisabledEdit clickhandleAddList新增/el-buttonel-table :dataruleForm.tableData border stylewidth: 100%el-table-column labeltemplate slotheaderspan classrequired*/span开始日期/templatetemplate slot-scopescopeel-form-item :proptableData. scope.$index .startDate :rules[{required: true, row:scope.row, validator:validStartDate, trigger: change}] labelel-date-pickerv-modelscope.row.startDate:disableddisabledEdittypedatevalue-formatyyyy-MM-ddplaceholder选择日期changehandleStartDate(scope.$index)stylewidth: 100%;/el-date-picker/el-form-item/template/el-table-columnel-table-column labeltemplate slotheaderspan classrequired*/span结束日期/templatetemplate slot-scopescopeel-form-item :proptableData. scope.$index .endDate :rules[{required: true, row:scope.row, validator:validEndDate, trigger: change}] labelel-date-pickerv-modelscope.row.endDate:disableddisabledEdittypedatevalue-formatyyyy-MM-ddplaceholder选择日期changehandleEndDate(scope.$index)stylewidth: 100%;/el-date-picker/el-form-item/template/el-table-columnel-table-column label操作 width80template slot-scopescopeel-form-item labelel-buttonsizeminitypetext:disableddisabledEditclassrequiredclick.stophandleDelTable(scope.$index)删除/el-button/el-form-item/template/el-table-column/el-tablesectionel-form-item label开始时间{{ ruleForm.startDate?.substring?.(0,10) }}/el-form-itemel-form-item label结束时间{{ ruleForm.endDate?.substring?.(0,10) }}/el-form-item/section/el-formdata() {return {ruleForm: {tableData: [],startDate:,endDate:,},rules:[],}},methods: {//开始日期validStartDate(rule, value, callback) {let row rule.rowif(!row.startDate) {callback(new Error(开始日期不能为空))} else if(row.endDatevaluenew 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.startDatevaluenew 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()}, },
