实现element ui表格动态编辑~

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

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

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

1.Vue表格代码如下：

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();;
      });
    },