通过获取dom ，来控制表格滚动
<template>
<div class="scroll_table">
<div style="display: inline-block; width: 100%">
<el-table
:data="tableData"
ref="table"
border
height="100%"
highlight-current-row
style="width:97%;margin-left:18px;margin-top:20px"
class="table_scroll"
:header-cell-style="{
background:'rgba(10, 103, 108, 0.5)',color:'#20cbaa',border: '0'}"
>
<el-table-column label="过车时间" prop="crossTime" :min-width="200">el-table-column>
<el-table-column label="车牌号" prop="plateNo" :min-width="140">el-table-column>
<el-table-column label="车辆类型" prop="plateType" :min-width="140">el-table-column>
<el-table-column label="车牌类型" prop="vehicleType" :min-width="140">el-table-column>
<el-table-column label="车速km/h" prop="speed" :min-width="140">el-table-column>
el-table>
div>
div>
template>
.scroll_table {
height: 100%;
display: flex;
::v-deep .table .el-table__body-wrapper {
display: none;
}
// 重点注意这段样式
.seamless-warp {
height: 400px !important;
overflow: hidden;
::v-deep .table_scroll .el-table__header-wrapper {
display: none;
}
}
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
/*width: 0;宽度为0隐藏*/
width: 0px !important;
}
/deep/.el-table__cell {
text-align: center !important;
}
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
background-color: transparent;
border: 0px;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
background-color: rgba(9, 100, 106, 0.2);
border: 0px;
color: white;
}
/deep/.el-table th.el-table__cell.is-leaf {
border: 0px;
}
/deep/.el-table__row {
border: 0px;
}
/deep/.el-table td.el-table__cell {
border: 0px;
border-top: 4px solid rgba(20, 20, 20, 0.5);
}
::v-deep .el-table tbody tr:hover > td {
background-color: rgba(20, 20, 20, 0.5) !important;
// color: #FFFFFF;
}
export default {
// import引入的组件需要注入到对象中才能使用
props: {
isFullscreen: {
type: Boolean,
default: false
},
tableData: {
type: Array,
default: ()=>[]
}
},
components: {},
data() {
// 这里存放数据
return {
columns: [
{
prop: "time",
label: "过车时间",
minWidth: "200",
sort: true
},
{
prop: "number",
label: "车牌号",
minWidth: "140",
sort: true
},
{
prop: "type",
label: "车辆类型",
minWidth: "140",
sort: true
},
{
prop: "type2",
label: "车牌类型",
minWidth: "140",
sort: true
},
{
prop: "speed",
label: "车速km/h",
minWidth: "140",
sort: true
}
],
tableList: [
{
id: "1",
time: "2019-09-22 13:34:22",
number: "张三1",
type: "待处理",
speed: 18
},
{
id: "2",
time: "2019-09-22 13:34:22",
number: "张三2",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三3",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三4",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三5",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三6",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三7",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三7",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三7",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三7",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三7",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三7",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三7",
type: "待处理",
speed: 18
},
{
id: "3",
time: "2019-09-22 13:34:22",
number: "张三7",
type: "待处理",
speed: 18
}
]
};
},
// 监控data中的数据变化
watch: {
tableData() {
this.tableList = [];
}
methods: {
doLayout() {
this.$nextTick(() => {
this.$refs.tables.doLayout();
});
},
getList() {
checkpointCapture().then(res => {
this.tableList = res.data.data;
});
}
},
// 生命周期 - 挂载完成（可以访问DOM元素）---实现滚动的核心js
mounted() {
this.$nextTick(() => {
const table = this.$refs.table;
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper;
// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 1;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (
divData.clientHeight + divData.scrollTop + 1 >
divData.scrollHeight
) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
}, 30);
});
},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};