After the merged avue-crud form, how to solve the bug that occurs when editing in the row

  Avue can configure table merging, but when the merged table encounters inline editing, the following BUG will appear

Bug description: When the second line is edited in-line, the first column has been merged and cannot be split out for modification. It will be troublesome to modify the first column.

 Effect display after solution: When adding or editing, the merge effect will be temporarily canceled, and when the point is completed or canceled, the merge effect will be displayed normally 

The key code is as follows:

Use the ifSpanMethod variable to control whether the current table should be merged. In the method of merging, it is judged to realize whether the table is merged when performing different operations.

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;//用变量控制表格是否合并，点完行取消按钮，此时的表格合并
    },
}