表格组件多级表头列合并单元格错位

• 1、vxe-table多级表头表格，使用vxe-table-colgroup分组时，单元格合并需注意，以下代码段为正确的代码示例。

<!-- vxe-table-单元格合并示例 -->
<template>
  <!-- 容器 -->
  <div class="gfr-fin-docu">
    <vxe-table ref="table" class="mt5" :data="tableData" border round max-height="500" :span-method="setColumnMerge" :header-cell-style="TABLE_HEADER_CELL_STYLE" :cell-style="TABLE_CELL_STYLE">
      <vxe-table-colgroup title="多级表头合并" header-align="center">
        <vxe-table-column title="报表项目" field="itemName" header-align="center" width="360">
          <template slot-scope="scope">
            {{scope.row.itemName}}
          </template>
        </vxe-table-column>
        <vxe-table-column title="上年年末数" field="oriValue" header-align="center" align="right" min-width="180">
          <template slot-scope="scope">
            第二列
          </template>
        </vxe-table-column>
        <vxe-table-colgroup title="调整事项" header-align="center">
          <vxe-table-column title="会计政策变更" field="updateTypeKjzcbg" header-align="center" align="right" min-width="180">
            <template slot-scope="scope">
              会计政策变更
            </template>
          </vxe-table-column>
          <vxe-table-column title="会计差错更正" field="updateTypeKjccbg" header-align="center" align="right" min-width="180">
            <template slot-scope="scope">
              会计差错更正
            </template>
          </vxe-table-column>
          <vxe-table-column title="审计调整" field="updateTypeSjtz" header-align="center" align="right" min-width="180">
            <template slot-scope="scope">
              审计调整
            </template>
          </vxe-table-column>
          <vxe-table-column title="其它" field="updateTypeQt" header-align="center" align="right" min-width="180">
            <template slot-scope="scope">
              其它
            </template>
          </vxe-table-column>
        </vxe-table-colgroup>
        <vxe-table-column title="本年年初数" field="newValue" header-align="center" align="right" min-width="180">
          <template slot-scope="scope">
            本年年初数
          </template>
        </vxe-table-column>
        <vxe-table-column title="备注" show-overflow field="updateReason" header-align="center" min-width="180">
          <template slot-scope="scope">
            备注
          </template>
        </vxe-table-column>
      </vxe-table-colgroup>
    </vxe-table>
  </div>
</template>
<script>
import { TABLE_HEADER_CELL_STYLE, TABLE_CELL_STYLE } from '@/mixin/page';
/**
 * 报表项目
 */
const ITEM_NAME = 'itemName';

export default {
  name: 'GFR_FIN_DOCU',
  data() {
    return {
      tableData: [
        {
          itemName: '第一行',
          itemIden: 'dept',
          oriValue: '',
          updateTypeKjzcbg: '',
          updateTypeKjccbg: '',
          updateTypeSjtz: '',
          updateTypeQt: '',
          newValue: '',
          updateReason: '第一行备注',
        },
        {
          itemName: '第二行',
          itemIden: 'dept',
          oriValue: '',
          updateTypeKjzcbg: '',
          updateTypeKjccbg: '',
          updateTypeSjtz: '',
          updateTypeQt: '',
          newValue: '',
          updateReason: '第二行备注',
        },
        {
          itemName: '第三行',
          itemIden: 'dept',
          oriValue: '',
          updateTypeKjzcbg: '',
          updateTypeKjccbg: '',
          updateTypeSjtz: '',
          updateTypeQt: '',
          newValue: '',
          updateReason: '第三行备注',
        },
        {
          itemName: '最后一行，单元格列合并',
          itemIden: 'anno',
          oriValue: '',
          updateTypeKjzcbg: '',
          updateTypeKjccbg: '',
          updateTypeSjtz: '',
          updateTypeQt: '',
          newValue: '',
          updateReason: '',
        },
      ], //表格数据
      TABLE_CELL_STYLE,
      TABLE_HEADER_CELL_STYLE,
    };
  },
  methods: {
    /**
     * 设置合并列
     * 1、注释行合并,列字段为itemName,报表项目列（多级表头vxe-table-colgroup下的列，列次信息从0开始，所以合并列也要判断列字段）
     */
    setColumnMerge({ row, column }) {
      if (row.itemIden === 'anno') {
        if (column.property === ITEM_NAME) {
          return { rowspan: 1, colspan: 8 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import '~@/assets/style/variables.scss';
::v-deep .vxe-table--render-default .vxe-cell {
  white-space: nowrap !important;
}
</style>

1、错误示例：

• 该错误示例为合并指定行所有列
• 在该表格中使用vxe-table-colgroup进行分组，指定行列合并根据列次合并

setColumnMerge({ row, column, columnIndex }) {
  if (row.itemIden === 'anno') {
    if (columnIndex === 0) {
      return { rowspan: 1, colspan: 8 };
    } else {
      return { rowspan: 0, colspan: 0 };
    }
  }
},

当vxe-table-colgroup下被合并行的第一列次存在数据时，横向会出现滚动条， 当vxe-table-colgroup下被合并行的第一列次没有数据时，则不会出现滚动条

2、正确示例：

• 该正确示例为合并指定行所有列
• 在该表格中使用vxe-table-colgroup进行分组，指定行根据列字段进行合并，根据列字段进行合并不会存在横向滚动列错位的问题

setColumnMerge({ row, column, columnIndex }) {
  if (row.itemIden === 'anno') {
    if (column.property === ITEM_NAME) {
      return { rowspan: 1, colspan: 8 };
    } else {
      return { rowspan: 0, colspan: 0 };
    }
  }
},