vxe-table循环多级表头时固定列出现滚动条如何处理

我是循环的多级表头。然后我根据条件判断固定了前面两列在左边。但是会出现滚动条。然后滚动到右边就是空白的。只有左边两行有内容。如何处理这种情况,是不是我这种固定方式写错了。用的是vxe-table插件

img

这是我的代码:主要是这一句固定的 :fixed="item.name=='数据'||item.name=='汇总'?'left':''"

<vxe-table
        border
        show-footer
        ref="xTable"
        height="500"
        align="center"
        :column-config="{ resizable: true }"
        :data="data"
        :span-method="mergeRowMethod"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        style="margin-top:10px"
      >
        <template v-for="(item, index) in her">
          <!-- 单层表头 -->
          <vxe-column
            :resizable="false"
            show-overflow
            :field="item.key"
            :title="item.name"
            width="100"
            v-if="item.child.length < 1"
            :key="'t' + index"
            :fixed="item.name=='数据'||item.name=='汇总'?'left':''"
          >
            <template #default="{ row }">
              <span :style="{ color: row[item.key] == '441' ? 'red' : '' }"
                >{{ row[item.key] }}
              </span>
            </template>
          </vxe-column>
          <!-- 多级表头 -->
          <vxe-colgroup :title="item.name" v-else :key="'n' + index">
            <vxe-column
              :resizable="false"
              show-overflow
              v-for="(arr2, i) in item.child"
              :key="i"
              :field="arr2.key"
              :title="arr2.name"
              width="100"
            >
              <template #default="{ row }">
                <span :style="{ color: row[arr2.key] == '441' ? 'red' : '' }"
                  >{{ row[arr2.key] }}
                </span>
              </template>
            </vxe-column>
          </vxe-colgroup>
        </template>
      </vxe-table>


根据您提供的代码,出现滚动条的原因是因为您使用了固定列的方式,但是没有设置表格的宽度,导致右侧的内容无法显示。您可以尝试设置表格的宽度,使其能够容纳所有的列,从而避免出现滚动条。
另外,您可以尝试使用vxe-table插件提供的固定列功能,该功能可以将指定的列固定在左侧或右侧,而不需要手动设置固定列的方式。具体使用方法可以参考vxe-table的官方文档。

可以通过以下方式解决:

  1. 在表格组件中使用固定列功能,将需要固定的列的属性设置为 fixed: "left" 或者 "right"。这样可以将该列固定在表格的左侧或者右侧,不随水平滚动条滚动。

  2. 对于固定列出现滚动条的情况,可以通过设置表格宽度来解决。在表格宽度不够的情况下,固定列会随着滚动条一同滚动,导致表格布局混乱。因此可以通过设置表格宽度来保证固定列不随滚动条滚动。可以设置表格组件的属性 width 或者 :max-width 来定义表格宽度。

  3. 可以尝试升级 vxe-table 组件。组件更新后可能会新增一些解决多级表头渲染的问题的解决方案,或者修复一些已知问题。

总的来说,解决 vxe-table 组件多级表头渲染的问题,需要结合具体情况采取不同的解决方案。