【elementui】记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

在Element UI的el-table组件中，当你设置左列或右列固定时，默认情况下滚动条会自适应宽度。如果你想增加滚动条的宽度，可以通过CSS来实现。

以下是一个简单的示例，演示如何通过CSS来增加固定列下的滚动条宽度：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    class="fixed-scroll-bar-table"
  >
    <!-- 固定左列 -->
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150"
    ></el-table-column>
    <!-- 其他列 -->
    <el-table-column
      prop="name"
      label="姓名"
      width="200"
    ></el-table-column>
    <!-- 固定右列 -->
    <el-table-column
      fixed="right"
      prop="address"
      label="地址"
      width="200"
    ></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...数据
      ]
    };
  }
};
</script>
 
<style>
/* 增加滚动条宽度 */
.fixed-scroll-bar-table .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px; /* 水平滚动条宽度 */
  height: 10px; /* 垂直滚动条高度 */
}
 
.fixed-scroll-bar-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* 滚动条颜色 */
  border-radius: 5px; /* 滚动条圆角 */
}
 
.fixed-scroll-bar-table .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f0f0f0; /* 滚动条轨道颜色 */
}
</style>

在上述代码中，我们为el-table添加了一个自定义的CSS类fixed-scroll-bar-table，然后通过这个类来指定滚动条的宽度和样式。::-webkit-scrollbar用于设置滚动条的全局样式，::-webkit-scrollbar-thumb用于设置滚动条滑块的样式，::-webkit-scrollbar-track用于设置滚动条轨道的样式。这些样式仅适用于Webkit内核浏览器，如Chrome和Safari。对于其他浏览器，你可能需要使用对应的非Webkit浏览器的滚动条样式规则。