需求: 在表格中对不断添加的行的时间选择器做限制
要求:
(1)第一行的时间大于今天的时间
(2)后面行的时间大于前面行的时间
(3)中间行的时间大于上一行的时间,小于下一行的时间
(4)必须每行选择时间后,才允许添加新的一行,如果当前行没有选择时间,点击添加按钮时给出警告提示
图例:
1、template
<div class="form-content">
<el-form :model="form" ref="form" :rules="rules">
<el-row>
<el-col :span="24">
<el-table :data="form.tableData" size="small" element-loading-text="Loading" border style="width: 100%" :header-cell-style="tableHeaderColor" :row-style="rowStyle" :cell-style="cellStyle" :row-class-name="tableRowClassName">
<el-table-column label="期次" type="uniqueCode" prop="期次">
<template slot-scope="scope">{{scope.$index+1}}</template>
</el-table-column>
<el-table-column label="计划回款日期" :render-header="renderHeader" prop="计划回款日期">
<template slot-scope="scope">
<el-form-item :rules="rules.planTime" :prop=" 'tableData.' + scope.$index + '.planTime' " class="styleCss">
<el-date-picker v-model="scope.row.planTime" type="date" placeholder="请选择计划回款日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :editable="false" :clearable="false" @focus="changeDate(scope.row.planTime,scope.$index)" :picker-options="pickerOptions" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="计划回款金额" prop="planMoney">
<template slot-scope="scope">
<el-form-item :rules="rules.planMoney" :prop=" 'tableData.' + scope.$index + '.planMoney' " class="styleCss">
<el-input v-model="scope.row.planMoney" placeholder="请输入计划回款金额" class="singleRowClass" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="备注" prop="备注">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.remark" placeholder="请输入备注" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<el-form-item>
<el-button @click="addRow(scope.$index)" class="el-icon-plus" size="mini"></el-button>
<el-button @click="deleteRow(scope.$index)" class="el-icon-delete" size="mini"></el-button>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-row style="text-align: right;margin-right:50px">
<span>合计:</span>
<span>{{sum.toFixed(2)}} 元</span>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button>取消</el-button>
<el-button type="primary">保存</el-button>
</div>
</div>
2、js--data
data() {
return {
form: {
tableData: [
{
//存放期次
uniqueCode: "",
planMoney: "",
planTime: "",
remark: "",
}
],
},
rules: {
//表单校验
planTime: [
{
required: true,
message: "请选择计划回款日期",
trigger: "change"
}
],
},
pickerOptions: {},
}
},
2、js--methods
methods: {
addRow(index) {//添加
const list = {
planTime: "",
planMoney: "",
remark: ""
};
let flag = false;
//判断必须输入计划回款日期才能添加新的一行
if (index == 0 && this.form.tableData[index].planTime === "") {
flag = true;
}
for (let i = 0; i < this.form.tableData.length; i++) {
if (this.form.tableData[this.form.tableData.length - 1].planTime === "") {
flag = true;
}
}
if (flag) {
this.$message({
message: '计划回款日期不能为空',
type: 'warning'
});
} else {
this.form.tableData.push(list);
}
},
deleteRow(index) {//删除
if (this.form.tableData.length > 1) {
this.form.tableData.splice(index, 1);
}
},
changeDate(data, index) {//判断时间禁用
if (index == 0) {//判断只有一条数据的禁用
this.pickerOptions.disabledDate = time => {
if (this.form.tableData.length > 1 && time.getTime() > new Date(this.form.tableData[index + 1].planTime).getTime() - 24 * 60 * 60 * 1000) {
return true;
} else {
return time.getTime() < new Date() - 24 * 60 * 60 * 1000
}
}
} else {
this.pickerOptions.disabledDate = time => {
//判断最后一条数据的禁用
if (time.getTime() <
new Date(this.form.tableData[index - 1].planTime).getTime()) {
return true;
}
//判断中间那条数据的禁用
if (
index != this.form.tableData.length - 1 &&
time.getTime() >
new Date(this.form.tableData[index + 1].planTime).getTime() -
24 * 60 * 60 * 1000
) {
return true;
}
}
}
},
tableRowClassName({ row, rowIndex }) {
row.index = rowIndex;
},
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return "background-color: #fafafa; color: rgba(0,0,0,.85); min-height: 44px!important; line-height: 44px!important; word-break: break-word";
}
},
rowStyle({ row, rowIndex }) {
return "min-height: 50px!important;";
},
cellStyle() {
return "min-height: 26px!important; padding: 7px 0!important";
},
renderHeader(h, { column, $index }) {
return h("div", {
attrs: {
class: "cell"
},
domProps: {
innerHTML:
'<span style="color:red;margin-right:5px">*</span>' + column.label
}
});
}
},
2、js--computed
表格中每一行相加的总和
computed: {
sum() {//合计
return this.form.tableData
.map(row => Number(row.planMoney))
.reduce((acc, cur) => Number(cur + acc), 0);
},
},
