实现element ui表格动态编辑~

效果图：点击编辑的时候，表格内部切换为输入框；

 在编辑状态下，随便单击一行，指定的单元格都是可编辑的状态，选择保存则多行保存成功，取消编辑则不保存操作的数据；

设计思路：1.先在表格的单元格内使用template绑定一个输入框和一个span标签。2.设置一个isEdit用于判断当前是否为编辑状态，如果是编辑的情况下，并且当前点击的row的ID和本行数据的ID相等，则显示输入框，否则就显示span标签。

1.Vue表格代码如下：

<el-table
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="indicatorInfoId"
      height="calc(100vh - 340px)"
      ref="fillSelect"
      border
      highlight-current-row
      default-expand-all
      @row-click="tableRowClassName"
      :tree-props="{ children: 'children' }"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="indicatorName" label="指标名称"></el-table-column>
        
      <el-table-column prop="currentMonth" label="本月">
        <template slot-scope="scope">
          <div class="input-box">
            <el-input
              v-show="currentRowId == scope.row.indicatorInfoId && isEdit"
              size="small"
              v-model="scope.row.currentMonth"
              type="number"
              step="0.01"
            ></el-input>
            <span
              v-show="currentRowId != scope.row.indicatorInfoId || !isEdit"
            >{{ scope.row.currentMonth }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="inTheSameMonthLastYearUsed" label="上年同月">
        <template slot-scope="scope">
          <div class="input-box">
            <el-input
              v-show="currentRowId == scope.row.indicatorInfoId && isEdit"
              size="small"
              v-model="scope.row.inTheSameMonthLastYearUsed"
              type="number"
              step="0.01"
            ></el-input>
            <span
              v-show="currentRowId != scope.row.indicatorInfoId || !isEdit"
            >{{ scope.row.inTheSameMonthLastYearUsed }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="addUp" label="累计">
        <template slot-scope="scope">
          <div class="input-box">
            <el-input
              v-show="currentRowId == scope.row.indicatorInfoId && isEdit"
              size="small"
              v-model="scope.row.addUp"
              type="number"
              step="0.01"
            ></el-input>
            <span
              v-show="currentRowId != scope.row.indicatorInfoId || !isEdit"
            >{{ scope.row.addUp }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

2.点击编辑，设置isEdit为true

// 点击编辑
    editFill() {
      if (!this.currentRowId) {
        this.$message({
          type: "warning",
          message: "请选择待编辑的记录",
        });
        return;
      }
      this.isEdit = true;
    },

3.编辑状态下，单击一行的时候，我们需要保存单击后的每一行数据

    // 单击一行的时候
    tableRowClassName(row, rowIndex) {
      this.currentRowId = row.indicatorInfoId;
      this.record = row;
      // editFillData 是用于存储点击过的行，
      // 不管有没有改变当前行的数据，都会添加到editFillData内
      let flag = this.editFillData.some(
        (it) => it.indicatorInfoId == row.indicatorInfoId
      );
      if (!flag) {
        this.editFillData.push(row);
      }
    },

4.保存编辑，

    // 保存编辑数据
    keepFillData() {
      let entityes = this.editFillData;
      let headData = [{name:"累计",en:"addUp"},{name:"本月",en:"currentMonth"},{name:"上年同月",en:"inTheSameMonthLastYearUsed"},{name:"上年累计",en:"lastYearAggregate"}]
      let saveData = entityes.reduce((pre,cur)=>{
        pre[cur.coalId] = headData.map(it=>{
          return {keyId:cur.coalId,columKey:it.en,columMean:it.name,columVal:cur[it.en]}
        })
        return pre
      },{})
      this.$http({
        url: this.$http.adornUrl(coalApi.year.save(coalApi.common.monthCode)),
        method: "put",
        data: saveData,
      }).then((data) => {
        if(!data) return false;
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$refs.fillSelect.setCurrentRow(-1);
          this.currentRowId = null;
           this.record = null;
          this.isEdit = false;
          this.editFillData = [];
          this.getDataList();;
      });
    },