vue+element根据选择的日期依次递增 生成表格以及编辑和删除

添加编辑和删除 只是在前端操作，不涉及接口，只有在最后提交的时候把所有数据传过去，
日期的递增，支持 闰年和平年 ,以及有31日和30日不同的月份

此文章日期递增部分参考了
https://blog.csdn.net/qq_35508835/article/details/106696047

关键代码：

<el-dialog title="结案" width="700px" :center="true" :visible.sync="dialogCloseCaseVisible" @close="handleCloseCase">
      <el-form :model="closeCaseForm" ref="closeCaseForm" class="close-case" :rules="rulesForm">
        <el-form-item class="row-item" :label-width="formLabelWidth" label="调解结果" prop="mediateResult">
          <el-select v-model="closeCaseForm.mediateResult">
            <el-option label="协议分期" value="3"></el-option>
            <el-option label="调解失败" value="2"></el-option>
            <el-option label="拒绝调解" value="4"></el-option>
            <el-option label="调解到期" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="结清金额" prop="settlementAmount" v-if="
          closeCaseForm.mediateResult == 1 || closeCaseForm.mediateResult == 3
        ">
          <el-input placeholder="请输入结清金额" v-model="closeCaseForm.settlementAmount" type="Number"></el-input>
        </el-form-item>
        <el-form-item class="row-item" label="" :label-width="formLabelWidth" v-if="closeCaseForm.mediateResult == 3">
          <el-button type="primary" size="mini" @click="openDialog()">插入还款计划</el-button>
        </el-form-item>
        <el-form-item class="row-item repaymentScheduleTable" label="" :label-width="formLabelWidth" v-if="showTable">
          <div>
            <el-table :data="repaymentScheduleTable" border style="width: 100%">
              <el-table-column prop="periods" label="期数" align="center">
              </el-table-column>
              <el-table-column prop="date" label="还款日" width="180" align="center">
              </el-table-column>
              <el-table-column prop="amount" label="月还金额" align="center">
              </el-table-column>
              <el-table-column prop="address" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
       </el-form>
      <div class="close-btn">
        <el-button size="small" type="primary" @click="closeCaseSub">确 定</el-button>
        <el-button size="small" @click="dialogCloseCaseVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
     <!-- 插入还款计划弹框 -->
    <el-dialog title="插入还款计划" :center="true" :visible.sync="repaymentScheduleDialog" width="20%"
      @close="handleCloseRepayment">
      <div style="padding: 30px;">
        <el-form label-width="100px" label-position="right" :model="refundPlanForm" ref="refundPlanForm"
          :rules="refundPlanRule">
          <el-form-item label="首期还款日:" prop="firstRepayment" class="refundPlanRow">
            <el-date-picker v-model="refundPlanForm.firstRepayment" value-format="yyyy-MM-dd" type="date">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="分期期数:" prop="stagesNumber" class="refundPlanRow">
            <el-input v-model="refundPlanForm.stagesNumber"
              @input="refundPlanForm.stagesNumber = refundPlanForm.stagesNumber.replace(/^(0+)|[^\d]+/g, '')"></el-input>
          </el-form-item>
          <el-form-item label="每期月还:" class="refundPlanRow">
            <el-input v-model="refundPlanForm.monthCount"
              @input="refundPlanForm.monthCount = refundPlanForm.monthCount.replace(/^(0+)|[^\d]+/g, '')"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="repaymentScheduleDialog = false">取 消</el-button>
        <el-button type="primary" @click="ensure('refundPlanForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 插入还款计划编辑弹框 -->
    <el-dialog title="编辑还款计划" :center="true" :visible.sync="editRepaymentScheduleDialog" width="20%">
      <div style="padding: 30px;">
        <el-form label-width="100px" label-position="right" :model="editRefundPlanForm" ref="editRefundPlanForm">
          <el-form-item label="还款日:" class="refundPlanRow">
            <el-date-picker v-model="editRefundPlanForm.rembursement" value-format="yyyy-MM-dd" type="date">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="月还金额:" class="refundPlanRow">
            <el-input v-model="editRefundPlanForm.amount"
              @input="editRefundPlanForm.amount = editRefundPlanForm.amount.replace(/^(0+)|[^\d]+/g, '')"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editRepaymentScheduleDialog = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit('editRefundPlanForm')">确 定</el-button>
      </span>
    </el-dialog>

<script>
export default {
data(){
	return{
			  repaymentScheduleTable: [],//插入还款计划表格
			  repaymentScheduleDialog: false, //插入还款计划弹框
      		  editRepaymentScheduleDialog: false,//插入还款计划编辑弹框
      		  showTable: false, //插入还款计划表格显示/隐藏
      		  
      		  //添加
      		  refundPlanForm: {
		        firstRepayment: "",
		        stagesNumber: "",
		        monthCount: ""
		      },
		      //编辑
		      editRefundPlanForm: {
		        rembursement: "",
		        amount: ""
		      },
		}

	},
	computed: {
		//全部的月还金额求和
	    sumAmount() {
	      return this.repaymentScheduleTable
	        .map(row => row.amount)
	        .reduce((acc, cur) => parseFloat(cur) + acc, 0);
	    }
    },
    methods: {
	    openDialog() {
	      this.repaymentScheduleDialog = true
	      // this.repaymentScheduleTable = []
	      // this.showTable = false
	    },
	    handleCloseCase() {
	      this.dialogCloseCaseVisible = false;
	      this.showTable = false
	      this.repaymentScheduleTable = []
	    },
	     // 结案提交
	     closeCaseSub() {
			if (this.closeCaseForm.settlementAmount != this.sumAmount) {
			        this.$message.warning('结清金额和还款计划月还金额总额不一致')
			        return false
		     }
		     let params = {
		     	repaymentPlans: this.repaymentScheduleTable
		     }
		     //接口请求操作
		     ...
	     },
	     //生成表格
	      ensure(formName) {
		      this.$refs[formName].validate((valid) => {
		        if (valid) {
		          this.repaymentScheduleDialog = false
		          this.showTable = true
		          this.repaymentScheduleTable = []
		          for (let b = 0; b < this.refundPlanForm.stagesNumber; b++) {
		            this.$set(this.repaymentScheduleTable, b, {
		              periods: b + 1,
		              date: this.addDate(this.refundPlanForm.firstRepayment, (b)),
		              amount: this.refundPlanForm.monthCount ? this.refundPlanForm.monthCount : 0
		            })
		          }
		          // console.log(this.repaymentScheduleTable)
		        } else {
		          console.log('error submit!!');
		          return false;
		        }
		      });
   		 },
   		 //根据选定的日期递增
   		 addDate(dateTar, num) {
		      var date = new Date(dateTar)
		      var day = date.getDate(),
		        month = date.getMonth(),
		        year = date.getFullYear()
		      // dateArr = this.dateFormmat(date, 'yyyy-MM-dd hh:mm:ss').split(' ');
		
		      year = year + parseInt((month + num) / 12);
		      month = (month + num) % 12;
		      //0-11 转变为 1-12
		      month += 1;
		      //获取特定年月的最大天数值 
		      var maxDayCount = new Date(year, month, 0).getDate();
		      day > maxDayCount ? day = maxDayCount : '';
		
		      month < 10 ? (month = '0' + month) : '';
		      day < 10 ? (day = '0' + day) : '';
		      return year + '-' + month + '-' + day;
	    },
	    //此方法可根据需求添加（本次需求不需要，贴上来方便以后查阅）
	    dateFormmat(date, format) {
		      if (null == date) {
		        return ''
		      }
		      if (typeof (date) == 'string' || typeof date === 'number') {
		        date = (typeof date === 'number') ? new Date(date) : new Date((date || '').replace(/-/g, '/'))
		      }
	
		      var o = {
		        "M+": date.getMonth() + 1, //month 
		        "d+": date.getDate(), //day 
		        "h+": date.getHours(), //hour 
		        "m+": date.getMinutes(), //minute 
		        "s+": date.getSeconds(), //second 
		        "q+": Math.floor((date.getMonth() + 3) / 3), //quarter 
		        "S": date.getMilliseconds() //millisecond 
		      }
	
		      if (/(y+)/.test(format)) {
		        format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
		      }
		
		      for (var k in o) {
		        if (new RegExp("(" + k + ")").test(format)) {
		          format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
		        }
		      }
		      return format;
    	},
    	//编辑还款日和月还金额
    	editSubmit() {
		      this.repaymentScheduleTable[this.editIndex].date = this.editRefundPlanForm.rembursement ? this.editRefundPlanForm.rembursement : this.repaymentScheduleTable[this.editIndex].date
		      this.repaymentScheduleTable[this.editIndex].amount = this.editRefundPlanForm.amount ? this.editRefundPlanForm.amount : this.repaymentScheduleTable[this.editIndex].amount
		      this.editRepaymentScheduleDialog = false
		      this.editRefundPlanForm.rembursement = ""
		      this.editRefundPlanForm.amount = ""
		      this.editIndex = ""
	    },
	    handleEdit(index, row) {
	      this.editRepaymentScheduleDialog = true
	      this.editIndex = index
	      this.editRefundPlanForm.rembursement = row.date
	      this.editRefundPlanForm.amount = row.amount
	    },
	    //删除
	    handleDelete(index, row) {
	      this.repaymentScheduleTable.splice(index, 1)
	      this.repaymentScheduleTable.forEach((el, i) => {
	        el.periods = i + 1
	      })
	    },


	}
}
</script>