vue+element ui项目总结点（二）table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1

1.oninput 事件在用户输入时触发;

<template>
  <div class="test_box">
    <p>hell,你好</p>
    <p>encodeURI编码后转码的路由参数内容----<span style="color: red">({{routerParmas}})</span></p>
    <div class="table_box">
      <el-table :data="sheetTableData" border style=" 100%" :summary-method="getSummaries" show-summary>
        <el-table-column prop="years" label="年度" align='center' sortable>
          <template slot-scope="scope">
            <el-input class="txt_ct" v-model="scope.row.years" placeholder="请输入" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="firstSeason" label="第一季度统计" align='center'>
          <template slot-scope="scope">
            <el-input class="txt_ct" v-model="scope.row.firstSeason" placeholder="请输入" oninput="value=value.replace(/[^d.]/g,'').replace(/^(d*(.d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="secondSeason" label="第二季度统计" align='center'>
          <template slot-scope="scope">
            <el-input class="txt_ct" v-model="scope.row.secondSeason" placeholder="请输入" oninput="value=value.replace(/[^d.]/g,'').replace(/^(d*(.d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="thirdSeason" label="第三季度统计" align='center'>
          <template slot-scope="scope">
            <el-input class="txt_ct" v-model="scope.row.thirdSeason" placeholder="请输入" oninput="value=value.replace(/[^d.]/g,'').replace(/^(d*(.d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fourthSeason" label="第四季度统计" align='center'>
          <template slot-scope="scope">
            <el-input class="txt_ct" v-model="scope.row.fourthSeason" placeholder="请输入" oninput="value=value.replace(/[^d.]/g,'').replace(/^(d*(.d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align='center'>
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click='addData' icon="el-icon-plus" circle></el-button>
            <el-button v-if="scope.$index == sheetTableData.length-1 || scope.$index == 0" @click.native.prevent="deleteData(scope.$index,sheetTableData)" type="danger" size="small" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
        <!-- 暂无数据 -->
        <div slot="empty" v-if="!sheetTableData.length" style="padding:20px;">
          <div style="margin-top: 10px">暂无数据
            <span>，请 <el-button type="text" @click="dialogVisible = true">新增</el-button></span>
          </div>
        </div>
      </el-table>
      <!-- 弹窗 -->
      <el-dialog title="请选择起始年份/截止年份" :visible.sync="dialogVisible">
        <div style="display: flex;align-items: center;justify-content: center;">
          <div class="block">
            <el-date-picker v-model="startYear" type="year" placeholder="起始年份" value-format="yyyy">
            </el-date-picker>
          </div>
          <div class="block">
            <p style="padding:10px;">至</p>
          </div>
          <div class="block">
            <el-date-picker v-model="endYear" type="year" placeholder="截止年份" value-format="yyyy">
            </el-date-picker>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureAddData">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isEgdit: false,//是否可编辑
      sheetTableData: [],//数据
      startYear: '',//起始年份
      endYear: '',//截止年份
      dialogVisible: false,//弹窗是否显示
      routerParmas: decodeURI(decodeURI(this.$route.query.goodName)), //路由编码参数解码
    };
  },
  methods: {
    //新增数据
    addData() {
      let item = {
        "id": null,
        "years": Number(this.sheetTableData[this.sheetTableData.length - 1].years) + 1,
        "firstSeason": null,
        "secondSeason": null,
        "thirdSeason": null,
        "fourthSeason": null
      }
      this.sheetTableData.push(item)
    },
    //确认依据起始年份/截止年份 添加数据
    sureAddData() {
      let yearDiff = Number(this.endYear - this.startYear)
      //console.log(yearDiff, 'yearDiff', this.endYear, 'timeEnd', this.startYear, 'timeStart')
      if (yearDiff > 0) {
        for (let i = 0; i <= yearDiff; i++) {
          this.sheetTableData.push({
            "id": null,
            "years": Number(this.startYear) + Number(i),
            "firstSeason": null,
            "secondSeason": null,
            "thirdSeason": null,
            "fourthSeason": null,
          })
        }
      } else {
        this.$eleMessage('截止年份应大于起始年份', 'error', 500)
      }
      this.dialogVisible = false;
    },
    //删除
    deleteData(index, list) {
      list.splice(index, 1);
    },
    //合计---Element ui自带合计功能还是蛮好用的 (前提是dom中的prop属性必须要有)
    getSummaries(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]));
        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] = '';
        }
      });
      return sums;
    },
    changeValue(){
        //1、oninput事件在value改变时触发,实时的即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发。
        //2、onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。
        console.log('输入时候可以做些什么事情')
    }
  }

}

</script>
<style scoped>

</style>