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();
},
methods: {
// 设置自动滚动
autoRoll(stop) {
if (stop) {
clearInterval(rolltimer);
return;
}
// 拿到表格挂载后的真实DOM
const table = this.$refs.rw_table;
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper;
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果
rolltimer = setInterval(() => {
// 元素自增距离顶部像素
divData.scrollTop += this.rollPx;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
}, this.rollTime * 10);
},
// 设置自动切换
autoChange(stop) {
if (stop) {
clearInterval(changetimer);
return;
}
changetimer = setInterval(() => {
this.autoPlay = !this.autoPlay;
this.autoRoll(true); // 先清除定时器
this.autoRoll(); // 再开启定时器
}, this.refreshTime * 1000);
},
// 鼠标进入
mouseEnter(time) {
// 鼠标进入停止滚动和切换的定时任务
this.autoRoll(true);
this.autoChange(true);
},
// 鼠标离开
mouseLeave() {
// 开启
this.autoRoll();
this.autoChange();
},
},
};
总结
参考地址
记录一下,方便下次直接用