vue table模拟excel 功能：可不断添加一行 最后一行做数据汇总

功能图：

代码：

<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      :summary-method="getSummaries"
      show-summary
      style="width: 100%"
      @cell-mouse-enter="handleCellEnter"
      @cell-mouse-leave="handleCellLeave"
    >
      <el-table-column prop="data" align="center" label="日期">
        <template slot-scope="scope">
          <div v-if="scope.row.id == 6666" class="txt">请添加</div>
          <div v-else class="txt">{{ scope.row.data }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="t1" align="center" label="USDCHF">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit"
            class="item"
            v-model="scope.row.t1"
            placeholder="请输入内容"
          ></el-input>
          <div v-else class="txt">{{ scope.row.t1 }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="t2" align="center" label="USDSGD">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit == 1"
            class="item"
            v-model="scope.row.t2"
            placeholder="请输入内容"
          ></el-input>
          <div v-else class="txt">{{ scope.row.t2 }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="t3" align="center" label="EURSGD">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit == 1"
            class="item"
            v-model="scope.row.t3"
            placeholder="请输入内容"
          ></el-input>
          <div v-else class="txt">{{ scope.row.t3 }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="t4" align="center" label="CHFJPY">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit == 1"
            class="item"
            v-model="scope.row.t4"
            placeholder="请输入内容"
          ></el-input>
          <div v-else class="txt">{{ scope.row.t4 }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="t5" align="center" label="EURCHF">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit == 1"
            class="item"
            v-model="scope.row.t5"
            placeholder="请输入内容"
          ></el-input>
          <div v-else class="txt">{{ scope.row.t5 }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="t6" align="center" label="EURGBP">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit == 1"
            class="item"
            v-model="scope.row.t6"
            placeholder="请输入内容"
          ></el-input>
          <div v-else class="txt">{{ scope.row.t6 }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:20px">
      <el-button type="success" @click="insertData">点击添加</el-button>
    </div>
  </div>
</template>

<script>
import teacherApi from "@/api/teacher";

export default {
  name: "Batch",
  data() {
    return {
      // 表格数据
      tableData: [],
      //添加的数据
      test: {},
    };
  },
  created() {
    this.fectData();
    this.handleCellLeave;
  },
  methods: {
    fectData() {
      teacherApi.test().then((res) => {
        this.tableData = res.data.item;
      });
    },
    insertData(){
      teacherApi.insert(this.test).then(res=>{
        if(res.code==20000){
          this.$message.success("填充成功")
        }
        else{
          this.$message.error("填充失败")
        }
        this.fectData();
      })
    },
    /** 鼠标移入cell */
    handleCellEnter(row, column, cell, event) {
      row.isEdit = 1;
    },
    /** 鼠标移出cell */
    handleCellLeave(row, column, cell, event) {
      this.test.t1 = row.t1;
      this.test.t2 = row.t2;
      this.test.t3 = row.t3;
      this.test.t4 = row.t4;
      this.test.t5 = row.t5;
      this.test.t6 = row.t6;
      row.isEdit = 0;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
        } else if (
          index === 5 ||
          index === 6 ||
          index === 4 ||
          index === 3 ||
          index === 2 ||
          index === 1
        ) {
          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);
          } else {
            sums[index] = "N/A";
          }
        } else {
          sums[index] = "--";
        }
      });
      return sums;
    },
  },
};
</script>

<style lang='scss'>
.item {
  width: 100px;
  /* 调整elementUI中样式 如果不需要调整请忽略 */
  .el-input__inner {
    height: 24px !important;
  }
}
.txt {
  line-height: 24px;
  padding: 0 9px;
  box-sizing: border-box;
}
</style>