vue 封装可编辑保存表格的树形table组件

需求描述：
如图点击编辑时，表格变成可编辑input框。

输入后，点击保存，则数据返回后台，重置页面。点击取消编辑后，不变。

代码逻辑：

<template>
  <div class="fill-content">
    <div class="fill-tool-btn">
      <el-button @click="editFill">编辑</el-button>
      <el-button @click="isEdit = false">取消编辑</el-button>
      <el-button @click="keepFillData">保存</el-button>
    </div>
    <div class="fill-table-content">
      <el-table
        :data="list"
        row-key="indicatorInfoId" //绑定了数据的唯一值变量id
        highlight-current-row //选中行 改变背景
        default-expand-all //默认展开所有节点
        @row-click="tableRowClassName" //　//点击表格某一行，触发tableRowClassName事件
        :tree-props="{children: 'children',hasChildren: 'hasChildren'}"
        //注意！ 在数据list中 children或hasChildren属性不能同时存在！！！
        //当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key!
      >
        <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">
          //当前行数据的获取用插槽,scope相当于一行的数据， scope.row相当于当前行的数据对象
            <div class="input-box">
            //如果currentRowId 等于本indicatorInfoId 以及点击了编辑按钮 则变成input 反之为span
              <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>
    </div>
  </div>
</template>

<script>
import { detectionApi } from "@/service/url";
export default {
  mixins: [tableMixins],
  data() {
    return {
      listUrl: fillApi.fill.getTreeUrl(this.$route.query.fillId),
      currentRowId: null,
      isEdit: false,
      editFillData: [],
    };
  },
    activated() {
    this.listUrl = fillApi.fill.getTreeUrl(this.$route.query.fillId);
    this.getDataList();
  },
  methods: {
    tableRowClassName(row, rowIndex) {
    //选中行时将选中行的indicatorInfoId赋值给currentRowId 
      this.currentRowId = row.indicatorInfoId;
      let flag = this.editFillData.some(
        it => it.indicatorInfoId == row.indicatorInfoId
      );
      //some() 方法用于检测数组中的元素是否满足指定条件
      //如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
      if (!flag) {
        this.editFillData.push(row);
      }
      //如果不存在，则向editFillData添加元素
    },
    // 点击编辑
    editFill() {
      if (!this.currentRowId) {
        this.$message({
          type: "warning",
          message: "请选择待编辑的记录"
        });
        return;
      }
      this.isEdit = true;
    },
    // 保存填报数据
    keepFillData() {
      this.isEdit = false;
      let entityes = this.editFillData;
      this.$http({
        url: this.$http.adornUrl(detectionApi.gas.saveModifyUrl('gas_year')),
        method: "put",
        data: entityes 
      }).then(data => {
        if (data.msg == "success") {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.editFillData = [];
          this.getDataList();
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
  }
};
</script>