修改el-table 默认滚动条
/* 定义滚动区域的滚动条的样式 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 14px; /* 设置滚动条的宽度 */
height: 14px;/* 设置滚动条的高度*/
}
/* 定义滚动条滑块的样式 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 0px!important; /* 设置滑块的圆角 */
background-color:#c1c1c1!important; /* 设置滑块的背景色 */
}
/* 定义滚动条轨道的样式 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
/* box-shadow: inset 0 0 20px rgba(224, 228, 11, 0.9) !important; 设置轨道的阴影效果 */
height: 14px;
background-color:#f1f1f1!important; /* 设置轨道的背景色 */
}
/* 针对Firefox的滚动条样式 */
/deep/ .el-table__body-wrapper {
scrollbar-width: thin !important; /* 设置滚动条宽度 */
scrollbar-color: #c1c1c1 #f1f1f1 !important; /* 设置滑块颜色和轨道颜色 */
}
修改table 默认滚动条
<template>
<div class="tableRow">
<!-- class="table-box" id="table-box" -->
<!-- 操作栏 -->
<div class="tableBtn">
<!-- class="export-box" -->
<btn-search btnTxt="批量审批" @click="spApplyHandker()" />
</div>
<div style="margin:0;width:100%">
<table class="table" style="margin:0;">
<colgroup>
<col name="el-table_1_column_13" width="40">
<col name="el-table_1_column_13" width="50">
<col name="el-table_1_column_13" width="100">
<col name="el-table_1_column_13" width="">
</colgroup>
<thead>
<tr>
<th style="padding-left:15px">
<img v-if="isSltAll" @click="spDataSlt=[],isSltAll=false"
src="../../assets/img/fxk_ygxsmall.png" />
<img v-else @click="trSltHandler('',true,true)" src="../../assets/img/fxk_wgx.png" />
</th>
<th>序号</th>
<th>提交时间</th>
<th>备注</th>
</tr>
</thead>
</table>
</div>
<div style="overflow: auto;
max-height:28rem;
width:100%
">
<table class="table" style="line-height: 30px;">
<colgroup>
<col name="el-table_1_column_13" width="40">
<col name="el-table_1_column_13" width="50">
<col name="el-table_1_column_13" width="100">
<col name="el-table_1_column_13" width="">
</colgroup>
<tr v-for="(item,key) in dataList" :key="key">
<td :rowspan="item.APPLY_IDcount" v-if="item.APPLY_IDshow ">
<span v-if="item.STATUS == 0">
<span >
<img v-if="spDataSlt.includes(item.ID)" @click="trSltHandler(item,false)"
src="../../assets/img/fxk_ygxsmall.png" />
<img v-else @click="trSltHandler(item,true)" src="../../assets/img/fxk_wgx.png" />
</span>
</span>
</td>
<td :rowspan="item.APPLY_IDcount" v-if="item.APPLY_IDshow " >{{item.num}}</td>
<td :rowspan="item.APPLY_IDcount" v-if="item.APPLY_IDshow ">{{item.UPDATE_TIME}}</td>
<td :rowspan="item.APPLY_IDcount" v-if="item.APPLY_IDshow "
style="max-width: 12rem;overflow: hidden;white-space: normal;min-width:8rem">{{item.REMARK}}
</td>
</tr>
</table>
</div>
<!-- <table class="table">
<thead>
<tr>
<th>
<img v-if="isSltAll" @click="spDataSlt=[],isSltAll=false"
src="../../assets/img/fxk_ygxsmall.png" />
<img v-else @click="trSltHandler('',true,true)" src="../../assets/img/fxk_wgx.png" />
</th>
<th>序号</th>
<th>提交时间</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,key) in dataList" :key="key">
<td :rowspan="item.APPLY_IDcount" v-if="item.APPLY_IDshow ">
<span v-if="item.STATUS == 0">
<span >
<img v-if="spDataSlt.includes(item.ID)" @click="trSltHandler(item,false)"
src="../../assets/img/fxk_ygxsmall.png" />
<img v-else @click="trSltHandler(item,true)" src="../../assets/img/fxk_wgx.png" />
</span>
</span>
</td>
<td :rowspan="item.APPLY_IDcount" v-if="item.APPLY_IDshow ">{{item.num}}</td>
<td :rowspan="item.APPLY_IDcount" v-if="item.APPLY_IDshow ">{{item.UPDATE_TIME}}</td>
<td :rowspan="item.APPLY_IDcount" v-if="item.APPLY_IDshow "
style="max-width: 12rem;overflow: hidden;white-space: normal;min-width:8rem">{{item.REMARK}}
</td>
</tr>
</tbody>
</table> -->
<!-- 滚动条 -->
<!-- <scorll-bar ref="scrollRef" id="table-box" /> -->
<!-- 暂无数据 -->
<no-data v-if="!dataList.length" table />
<div class="rows flex-jf-end" style="margin-top: 20px" v-else>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPager" :page-sizes="pageSizes" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount" />
</div>
</div>
</template>
<style scoped lang='less'>
table {
table-layout: fixed; /* 设置表格布局为固定 */
width: 100%; /* 设置表格宽度为100% */
}
table.table tbody tr td {
border: 0.05rem solid #e8e8e8 !important;
/* text-align: center; */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
table.table tr td {
border: 0.05rem solid #e8e8e8 !important;
padding-left:10px;
text-overflow: ellipsis;
white-space: wrap;
overflow: hidden;
}
table.table tr th {
// border: 0.05rem solid #e8e8e8 !important;
padding:0px;
padding-left:10px;
}
table {
width: 99.6%; /* 表格宽度 */
border-collapse: collapse; /* 折叠边框 */
}
/* 为了修改滚动条样式,你需要先隐藏默认的滚动条 */
::-webkit-scrollbar {
width: 9px; /* 设置滚动条的宽度 */
height: 9px; /* 设置滚动条的高度 */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background: #ffffff; /* 设置轨道的背景颜色 */
width: 9px;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
background: #e9e9e9; /* 设置滑块的背景颜色 */
border-radius: 20px;
}
/* 当鼠标滑过滑块 */
::-webkit-scrollbar-thumb:hover {
background: #e9e9e9; /* 设置滑块hover状态的背景颜色 */
}
</style>