el-table 固定列fixed和合计行show-summary 导致横向滚动条无法滚动

最新推荐文章于 2025-10-11 14:27:48 发布

原创最新推荐文章于 2025-10-11 14:27:48 发布 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui

ElementUI 同时被 3 个专栏收录

12 篇文章

订阅专栏

javascript

11 篇文章

订阅专栏

css

2 篇文章

订阅专栏

在使用Element UI的el-table组件时，如果同时设置了左固定列(fixed)和合计行(show-summary)，可能会遇到横向滚动条无法滚动到红色区域的bug。该问题出现在表格的合计行被固定列遮挡，导致无法查看完整内容。解决方案是在CSS中增加样式，将el-table__body-wrapper的z-index设为2，使滚动条能够覆盖固定列，从而实现正常滚动。同时，可以自定义滚动条的样式以提高用户体验。

项目场景：

提示：这里简述项目相关背景：
在el-table中同时使用左固定列fixed和合计行show-summary

问题描述：

提示：这里描述项目中遇到的问题：
el-table 同时使用左固定列fixed和合计行show-summary 导致横向滚动条红色区域无法滚动
在这里插入图片描述
代码如下：

//html
<div class="table-box">
              <el-table
                id="exportData"
                ref="report-table"
                v-loading="loading"
                style="width: 100%"
                :data="tableData"
                show-summary
                :header-cell-style="{
                  background: '#FAFAFA',
                  color: '#000000',
                  'font-family': 'Source Han Sans CN',
                  'font-size': '14px'
                }"
                height="100%"
              >
                <el-table-column
                  width="150px"
                  fixed
                  prop="materialTypeName"
                  label="物料类型"
                />
                <el-table-column
                  width="150px"
                  fixed
                  prop="materialSort"
                  label="分类"
                />
                <el-table-column
                  width="170px"
                  fixed
                  prop="materialName"
                  label="物料名称"
                />
                <el-table-column
                  width="130px"
                  fixed
                  prop="currentInventory"
                  label="当前库存数量"
                />
                <el-table-column
                  width="150px"
                  fixed
                  prop="oweNumNearlyThirtyDays"
                  label="近30天欠料数量"
                />
                <el-table-column
                  width="150px"
                  fixed
                  prop="requireNumNearlyThirtyDays"
                  label="近30天需求量"
                />
                <el-table-column label="每天生产订单需求量">
                  <el-table-column
                    v-for="(item, index) in requirementList"
                    :key="index"
                    :prop="item"
                    :label="item"
                    width="110px"
                  />
                </el-table-column>
              </el-table>
              <!-- <el-table
                id="exportSumData"
                ref="report-sum-table"
                class="exportSumData"
                style="width: 100%"
                :data="summaryData"
                :header-cell-style="{
                  display: none
                }"
                height="40px"
              >
                <el-table-column
                  width="150px"
                  fixed
                  prop="materialTypeName"
                  label="物料类型"
                />
                <el-table-column
                  width="150px"
                  fixed
                  prop="materialSort"
                  label="分类"
                />
                <el-table-column
                  width="170px"
                  fixed
                  prop="materialName"
                  label="物料名称"
                />
                <el-table-column
                  width="130px"
                  fixed
                  prop="currentInventory"
                  label="当前库存数量"
                />
                <el-table-column
                  width="150px"
                  fixed
                  prop="oweNumNearlyThirtyDays"
                  label="近30天欠料数量"
                />
                <el-table-column
                  width="150px"
                  fixed
                  prop="requireNumNearlyThirtyDays"
                  label="近30天需求量"
                />
                <el-table-column label="每天生产订单需求量">
                  <el-table-column
                    v-for="(item, index) in requirementList"
                    :key="index"
                    :prop="item"
                    :label="item"
                    width="110px"
                  />
                </el-table-column>
              </el-table> -->
            </div>
//css
.table-box {
            height: 100%;
          }

解决方案：

提示：在el-table中设置el-table__body-wrapper的层级为2：

.el-table {
              .el-table__body-wrapper {
                z-index: 2;
              }
            }

设置滚动条样式

::-webkit-scrollbar {
              background: rgb(231, 230, 230);
              width: 8px;
              height: 8px;
            }
            ::-webkit-scrollbar-thumb {
              background: rgba(0, 0, 0, 0.2);
              width: 8px;
            }
            ::-webkit-scrollbar-track {
              background: rgb(231, 230, 230);
              width: 8px;
            }

效果：

在这里插入图片描述