Requirement: Add new data to the table, calculate the earliest start date and the latest end date, and display them below.
<el-form
ref="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-picker
v-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-picker
v-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-button
size="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.row
if(!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.row
if(!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() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
return 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()
},
},