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

项目场景：

提示：这里简述项目相关背景：
在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;
            }

效果：