elementtable⾃动滚动+滚动条样式修改element table⾃动滚动+滚动条样式修改
⽂章⽬录
⼀、table滚动样式修改
.table {
background:rgba(187,187,187,100);
}
.table th.gutter:last-of-type {
border:0!important;
}
/* //滚动条的宽度 */
.table .el-table__body-wrapper::-webkit-scrollbar {
border:0;
width:6px;
height:10px;
}
/* //滚动条的滑块 */
.table .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius:3px;
}
⼆、table样式修改
1.⾼亮⾏
⾼亮⾏
.el-table {
/deep/.el-table--striped
.el-table__body
tr.el-table__row--striped.current-row
td,
/deep/.el-table__body tr.current-row > td {
color: #fff;
background-color: #666!important;
}
}
2.⾼亮⾏
⿏标划上
.el-table {
/deep/.el-table__body tr:hover > td {
color: #999!important;
}
}
3.table样式修改
.el-table >>> th {
background-color: #666666;
font-size:36px;
}
.el-table >>>.cell {
line-height: normal;
}
.el-table >>> tr {
background-color:rgba(187,187,187,100);
}
.el-table >>> td {
border-top:2px solid #999;
}
三、table⾃动滚动
<script>
let rolltimer ="";// ⾃动滚动的定时任务
let changetimer ="";// ⾃动切换的定时任务
export default{
data(){
return{
rollPx:1,
refreshTime:5,
rollTime:5,
}
}
mounted(){
this.autoRoll();
this.autoChange();element表格横向滚动条
},
methods:{
// 设置⾃动滚动
autoRoll(stop){
if(stop){
clearInterval(rolltimer);
return;
}
/
/ 拿到表格挂载后的真实DOM
const table =this.$refs.rw_table;
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper;
// 拿到元素后，对元素进⾏定时增加距离顶部距离，实现滚动效果
rolltimer =setInterval(()=>{
// 元素⾃增距离顶部像素
divData.scrollTop +=llPx;
// 判断元素是否滚动到底部(可视⾼度+距离顶部=整个⾼度)
if(divData.clientHeight + divData.scrollTop == divData.scrollHeight){ // 重置table距离顶部距离
divData.scrollTop =0;
}
},llTime *10);
},
// 设置⾃动切换
autoChange(stop){
if(stop){
clearInterval(changetimer);
return;
}
changetimer =setInterval(()=>{
this.autoPlay =!this.autoPlay;
this.autoPlay =!this.autoPlay;
this.autoRoll(true);// 先清除定时器
this.autoRoll();// 再开启定时器
},freshTime *1000);
},
// ⿏标进⼊
mouseEnter(time){
// ⿏标进⼊停⽌滚动和切换的定时任务this.autoRoll(true);
this.autoChange(true);
},
// ⿏标离开
mouseLeave(){
// 开启
this.autoRoll();
this.autoChange();
},
},
};
总结
记录⼀下，⽅便下次直接⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。