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>