合并后的avue-crud表格，在行内编辑时出现的bug如何解决

  avue可配置表格合并，但是当合并的表格遇到行内编辑时，会出现如下BUG

bug描述：第二行在行内编辑时，第一列已经合并，无法拆分出来进行修改，想要修改第一列会比较麻烦。

 解决后的效果展示：在新增或编辑时，合并效果会暂时取消，当点完成或取消，合并效果正常显示 

关键代码如下：

用ifSpanMethod变量来控制当前表格是否要合并，在合并的方法里，对其进行判断，来实现表格进行不同操作时是否合并。

html部分

<avue-crud
      :option="option"
      :data="tableData"
      :table-loading="loading"
      ref="crud"
      @on-load="onLoad"
      @row-update="updateRow"  //编辑完点保存时调用的方法
      @row-save="saveRowOne"   //新增数据保存时调用的方法
      @row-del="rowDel"        //删除数据时调用的方法
      :span-method="rowspanMethod"
    >
      <template slot="menuLeft"> //左上方的新增，用于新增行，使用前需要将addBtn: false,
        <el-button @click="addRow" type="primary" size="small"
          ><i class="el-icon-plus"></i> 新 增</el-button
        >
      </template>
      <template slot-scope="{ row, index }" slot="menu">
        <el-button type="text" size="small" @click="rowCell(row, index)"
          ><i
            style="color: #409eff"
            :class="[
              { 'el-icon-edit': !row.$cellEdit },
              { 'el-icon-check': row.$cellEdit },
            ]"
          >
            {
   
   { row.$cellEdit ? "保 存" : "修 改" }}</i
          ></el-button
        >
        <el-button
          v-if="row.$cellEdit"
          type="text"
          size="small"
          @click="cancel(row, index)"
          ><i class="el-icon-close">取 消</i></el-button
        >
      </template>


js部分
data() {
    return {
      tableData: [],
      ifSpanMethod: false,
      loading: false,
      temType: "1",
      option: {
        index: true,
        indexLabel: "序号",
        indexFixed: false,
        menuFixed: false,
        menu: true,
        border: true,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        cellBtn: false,
        columnBtn: false,
        cancelBtn: false,//行取消按钮
        menuWidth: 250,
        column: [
          {
            label: "标准",
            prop: "tor",
            slot: true,
            rules: [
              {
                required: true,
                message: "请输入标准",
                trigger: "blur",
              },
            ],
            cell: true,//cell用来决定改prop是否参与行编辑
          },
        ]
    }
}
methods:{
//合并列的关键代码，可直接复制方法使用，只需要修改 “type” 和 “this.tableData”为你想要合并列的prop和表格的tableList
    rowspanMethod({ row, column, rowIndex }) {
      if (!this.ifSpanMethod) return;
      let fields = ["type"];
      let cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        let prevRow = this.tableData[rowIndex - 1];
        let nextRow = this.tableData[rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = this.tableData[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
    updateRow(form, index, done, loading) {
      
    },
    saveRowOne(form, done, loading) {
      this.saveRow(form, done, loading);
    },
    saveRow(form, done, loading) {
     
    },
    rowDel(form) {
    
    },
    addRow() {
      this.ifSpanMethod = false; //用变量控制表格是否合并，此时的表格已经不合并。
      this.$refs.crud.rowCellAdd({
        id: "",
        type: this.temType,
        $cellEdit: true,
      });
    },
    rowCell(row, index) {
      this.ifSpanMethod = false;//用变量控制表格是否合并，此时的表格已经不合并。
      this.$refs.crud.rowCell(row, index);
    },
cancel(row, index) {
      this.$refs.crud.rowCancel(row, index);
      this.ifSpanMethod = true;//用变量控制表格是否合并，点完行取消按钮，此时的表格合并。
    },
    onLoad() { //初始化表格数据的方法
      this.ifSpanMethod = true;//用变量控制表格是否合并，点完行取消按钮，此时的表格合并
    },
}