element表格根据月份增长18个月，以及合计

<template>
  <div class="cbox">
    <!--<el-form :inline="true" class="demo-form-inline">-->
    <!--<el-form-item>-->
    <!--<el-button type="primary" @click="onAddHandle"> 新增 </el-button>-->
    <!--</el-form-item>-->
    <!--&lt;!&ndash;<a href="javascript:;" id="download" style="background-color:#409EFF;color: #fff;padding: 12px 10px!important;margin-left: 10px!important;border-radius:4px " @click="download()" download="download.csv">导出数据</a>&ndash;&gt;-->
    <!--</el-form>-->
    <el-table
      :data="tableData6"
      border
      style="width: 100%"
      @cell-dblclick="celledit"
      show-summary
      :summary-method="only">
      <el-table-column label="账号">
        <template slot="header" slot-scope="scope">
          <label class="blankname">账号</label>
          <el-input v-model="input" size="mini" placeholder="输入账号" class="blankvalue"/>
        </template>
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="日期"
          width="150"
          prop="data"
        >
          <template slot="header" slot-scope="scope">
            <el-date-picker size="small" v-model="value2" @change='clisk' value-format='yyyy-MM' type="month" placeholder="选择日期">
            </el-date-picker>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.data.value }}</span>
          </template>

        </el-table-column>
        <el-table-column
          align="right"
          prop="initialAmount"
          label="期初金额">
          <template slot-scope="scope">
            <el-input v-if="scope.row.initialAmount.edit" ref="initialAmount" v-model="scope.row.initialAmount.value"
                      style="width: 100%" @blur="scope.row.initialAmount.edit = false">
            </el-input>
            <span v-else>{{ scope.row.initialAmount.value }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="inflowOfGoods"
          sortable
          label="货款流入">
          <template slot-scope="scope">
            <el-input v-if="scope.row.inflowOfGoods.edit" ref="inflowOfGoods" v-model="scope.row.inflowOfGoods.value"
                      style="width: 100%" @blur="scope.row.inflowOfGoods.edit = false">
            </el-input>
            <span v-else>{{ scope.row.inflowOfGoods.value }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="otherInflows"
          sortable
          label="其他流入">
          <template slot-scope="scope">
            <el-input v-if="scope.row.otherInflows.edit" ref="otherInflows" v-model="scope.row.otherInflows.value"
                      style="width: 100%" @blur="scope.row.otherInflows.edit = false">
            </el-input>
            <span v-else>{{ scope.row.otherInflows.value }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="inflowAndInflow"
          sortable
          label="往来流入">
          <template slot-scope="scope">
            <el-input v-if="scope.row.inflowAndInflow.edit" ref="inflowAndInflow" v-model="scope.row.inflowAndInflow.value"
                      style="width: 100%" @blur="scope.row.inflowAndInflow.edit = false">
            </el-input>
            <span v-else>{{ scope.row.inflowAndInflow.value }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="procurementOutflow"
          sortable
          label="采购流出">
          <template slot-scope="scope">
            <el-input v-if="scope.row.procurementOutflow.edit" ref="procurementOutflow"
                      v-model="scope.row.procurementOutflow.value" style="width: 100%"
                      @blur="scope.row.procurementOutflow.edit = false">
            </el-input>
            <span v-else>{{ scope.row.procurementOutflow.value }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="correlationOutflow"
          sortable
          label="关联流出">
          <template slot-scope="scope">
            <el-input v-if="scope.row.correlationOutflow.edit" ref="correlationOutflow"
                      v-model="scope.row.correlationOutflow.value" style="width: 100%"
                      @blur="scope.row.correlationOutflow.edit = false">
            </el-input>
            <span v-else>{{ scope.row.correlationOutflow.value }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="otherOutflows"
          sortable
          label="其他流出">
          <template slot-scope="scope">
            <el-input v-if="scope.row.otherOutflows.edit" ref="otherOutflows" v-model="scope.row.otherOutflows.value"
                      style="width: 100%" @blur="scope.row.otherOutflows.edit = false">
            </el-input>
            <span v-else>{{ scope.row.otherOutflows.value }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="outstandingBalance"
          sortable
          label="期未余额">
          <template slot-scope="scope">
            <el-input v-if="scope.row.outstandingBalance.edit" ref="outstandingBalance"
                      v-model="scope.row.outstandingBalance.value" style="width: 100%"
                      @blur="scope.row.outstandingBalance.edit = false">
            </el-input>
            <span v-else>{{ scope.row.outstandingBalance.value }}</span>
          </template>
        </el-table-column>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        input: '',
        value2: '',
        tableData6: [
          {
            data: '',
            initialAmount: '',
            inflowOfGoods: '',
            otherInflows: '',
            inflowAndInflow: '',
            procurementOutflow: '',
            correlationOutflow: '',
            otherOutflows: '',
            outstandingBalance: ''
          }
        ]
      };
    },
    mounted() {

    },
    methods: {
      only(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property].value));
          // const values = data.map((item)=>{
          //   Number(item[column.property]);
          //   console.log(item[column.property].value)
          // })

          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      },
      formatData() {
        var key
        this.tableData6.forEach(item => {
          for (key in item) {
            item[key] = {
              value: item[key],
              edit: false
            }
          }
        })
        console.log(this.tableData6)
      },
      celledit(row, column, cell, event) {
        console.log(column.property)
        if (row[column.property]) {
          row[column.property].edit = true
          setTimeout(() => {
            this.$refs[column.property].focus()
          }, 20)
        }

      },
      clisk() {
        this.tableData6 = []

        function getMyDate(str) {
          str = parseInt(str);
          if (str != "" || str != null) {
            var oDate = new Date(str);
            var oYear = oDate.getFullYear();
            var oMonth = oDate.getMonth() + 1;
            oMonth = oMonth >= 10 ? oMonth : '0' + oMonth;
            var theDate = oYear + "-" + oMonth
          } else {
            theDate = "";
          }
          return theDate
        };
        for (let index = 0; index < 18; index++) {
          console.log(this.value2)
          //     var date= new Date(Date.parse(row.value2.replace(/-/g,  "/")));
          console.log(date)
          var date = new Date(this.value2);
          var dateDemo = date.setMonth(date.getMonth() + index);
          var d = (getMyDate(dateDemo))
          var t = {
            data:d,
            initialAmount: "",
            inflowOfGoods: "",
            otherInflows: "",
            inflowAndInflow: "",
            procurementOutflow: "",
            correlationOutflow: "",
            otherOutflows: "",
            outstandingBalance: ""
          }
          this.tableData6.push(t)
          //     this.value1.push((getMyDate(dateDemo)))
        }
        // this.tableData6.forEach((item) => {
        //   console.log(item)
        //   this.$set(item, 'initialAmount', "1")
        //   this.$set(item, 'inflowOfGoods', "2")
        //   this.$set(item, 'otherInflows', "3")
        //   this.$set(item, 'inflowAndInflow', "4")
        //   this.$set(item, 'procurementOutflow', "5")
        //   this.$set(item, 'correlationOutflow', "6")
        //   this.$set(item, 'otherOutflows', "7")
        //   this.$set(item, 'outstandingBalance', "8")
        //
        // })


        //编辑
        // onEditHandle(index, row) {
        //   this.changeFormVisible = true
        //   this.getAxios('/company/equipment/load?equipmentDataId=' + row.equipmentDataId).then((res)=>{
        //     this.changeForm=res.data
        //     localStorage.setItem('equipmentDataId',row.equipmentDataId)
        //     console.log(res)
        //   }).catch((error)=>{
        //     console.log(error)
        //   })
        // },
        this.formatData()

      }
    }
  }
</script>

<style>
  .blankname {
    line-height: 40px;
    float: left;
  }

  .blankvalue {
    float: left;
    width: 300px;
  }
</style>