element-plus中的el-table如何使横向滚动条位置调整

Question

在使用el-table中，如何调整el-table横向滚动条的位置，代码如下

    <div class="table-center" >
      <div style="width: 100%;max-height: calc( 100vh - 250px ); overflow-x: auto;max-height: calc( 100vh - 250px );overflow-y: auto;">
        <el-table :data="allData.orderList" border stripe >
          <el-table-column
              label="序号"
              type="index"
              width="60"

              align="center">
            <template v-slot="scope">
              <span>{{ (pageParam.page - 1) * pageParam.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="productOrderNumber" label="订单编号" width="180px"/>
          <el-table-column prop="shopName" label="店铺" />
          <el-table-column prop="storehouse" width="120px" label="仓库" />
          <el-table-column prop="orderNumber" width="180px" label="子单原始单号" />
          <el-table-column prop="status"  label="订单状态" />
          <el-table-column prop="tradeTime" width="180px" label="交易时间" />
          <el-table-column prop="paymentTime" width="180px" label="付款时间" />
          <el-table-column prop="shippingTime" width="180px" label="发货时间" />
          <el-table-column prop="deliveryArea" width="180px" label="收货地区" />
          <el-table-column prop="distributor" label="分销商" />
          <el-table-column prop="logisticsCompany" label="物流公司" />
          <el-table-column prop="logisticsTrackingNumber" label="物流单号" />
          <el-table-column prop="customerServiceNotes" width="250px" label="客服备注" />
          <el-table-column prop="estimatedCosts" label="订单预估成本" />
          <el-table-column prop="postageCost" label="邮资成本" />
          <el-table-column prop="merchantCode" label="商家编码" />
          <el-table-column prop="productCode" label="货品编码" />
          <el-table-column prop="platformProductId" label="平台货品id" />
          <el-table-column prop="platformSpecificationId" label="平台规格id" />
          <el-table-column prop="orderQuantity" label="下单数量" />
          <el-table-column prop="soldPrice" label="成交价"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" icon="Edit" circle @click="editRemark(scope.row)"/>
              <el-button type="danger" icon="Delete" circle  @click="deleteSingleInfo(scope.row.id)"/>

            </template>
          </el-table-column>
        </el-table>

      </div>
      <el-pagination
          v-model:current-page="pageParam.page"
          v-model:page-size="pageParam.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="justify-content: center;margin-top: 15px"
      />


    </div>

其中table-center的样式如下

.table-center{
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-top: 20px;
  max-height: calc(100vh - 200px);

}

实际效果如下

理想状态如下

这个如何实现

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要实现el-table横向滚动条位置调整，你可以通过CSS样式来调整滚动容器的位置。在你的代码中，你可以尝试以下步骤来调整横向滚动条的位置：

1. 为包含el-table的div添加一个类名，例如table-container。

<div class="table-center table-container">
  <!-- el-table内容 -->
</div>

1. 在CSS样式中，为这个类设置适当的样式来调整滚动条的位置。你可以使用CSS的overflow-x属性来控制横向滚动，并使用其他相关属性来调整容器的位置。

例如，你可以尝试调整table-container的样式来移动横向滚动条的位置：

.table-container {
  width: 100%; /* 或者其他你需要的宽度 */
  overflow-x: auto; /* 启用横向滚动 */
  /* 其他样式属性，如padding、margin等 */
}

请注意，具体的样式调整可能需要根据你的页面布局和设计需求来进行微调。你可以尝试不同的CSS属性和值来达到你想要的效果。另外，确保你的CSS样式正确应用到对应的元素上，并且没有其他样式冲突影响到滚动条的位置。