mac电脑解决el-table 有固定列fixed ，滚动条被覆盖，表格无法对齐，滚动条被覆盖

空白_A

已于 2024-06-30 15:43:02 修改

阅读量215

点赞数 1

文章标签： macos vue.js javascript

于 2024-06-30 15:21:38 首次发布

本文链接：https://blog.csdn.net/weixin_56933704/article/details/140080827

版权

isMac判断是否是mac,加类名.userAgentMac 修改滚动轴和表格样式

<template>
    <el-table
        :class="isMac? 'winuserAgent' : 'userAgentMac'"
        :data="tableData"
        v-loading="listLoading"
        border
        height="100%"
        ref="myTable"
        :header-cell-style="getHeaderBgColor">
      <el-table-column
          prop="province"
          label="省份">
      </el-table-column>
    </el-table>
</template>
data() {
  return {
    isMac: true,
  },
},

async created() {
    // 判断用户是否使用了苹果电脑
    if (navigator.userAgent.includes('Mac')) {
       this.isMac =false
    } else {
        this.isMac =true
    }
},
methods:{

},
<style>
// mac
::v-deep .userAgentMac {
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条
  }
  // 滚动轴样式
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #dde; 
    border-radius: 3px;
  }
  .el-table__body-wrapper::-webkit-scrollbar-track{
    background: white;
    border-radius:2px;
  }

  .el-table__body-wrapper{
    overflow: overlay;
  }
  .el-table__fixed-left{
    left:6px!important;
    bottom: 6px!important;
  }
  // 滑动时防止看到表格内容
  .el-table__fixed-left::before{
      background: #FFFFFF!important;
  }
  .el-table__fixed, .el-table__fixed-left{
    height: calc(100% - 6px) !important; // 留出滚动条的高度
  }
  .el-table__fixed-body-wrapper .el-table__body {
    padding-bottom: 6px; // 留出滚动条的高度
  }
}
</style>

参考文章：el-table 滚动条（固定列）问题 - 掘金 (juejin.cn)