修改table/el-table滚动条_el-table 滚动条

修改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>