我是循环的多级表头。然后我根据条件判断固定了前面两列在左边。但是会出现滚动条。然后滚动到右边就是空白的。只有左边两行有内容。如何处理这种情况,是不是我这种固定方式写错了。用的是vxe-table插件
这是我的代码:主要是这一句固定的 :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的官方文档。
可以通过以下方式解决:
在表格组件中使用固定列功能,将需要固定的列的属性设置为 fixed: "left" 或者 "right"。这样可以将该列固定在表格的左侧或者右侧,不随水平滚动条滚动。
对于固定列出现滚动条的情况,可以通过设置表格宽度来解决。在表格宽度不够的情况下,固定列会随着滚动条一同滚动,导致表格布局混乱。因此可以通过设置表格宽度来保证固定列不随滚动条滚动。可以设置表格组件的属性 width 或者 :max-width 来定义表格宽度。
可以尝试升级 vxe-table 组件。组件更新后可能会新增一些解决多级表头渲染的问题的解决方案,或者修复一些已知问题。
总的来说,解决 vxe-table 组件多级表头渲染的问题,需要结合具体情况采取不同的解决方案。