原先方案是用el-table-column插件来实现但发现在el-table-column的原理是copy原数据做为第二份数据中show-overflow-tooltip会失效,所以换了个JS写法
代码如下:
<div class="table_box2">
<el-table
ref="scroll_table"
height="476"
solt="append"
:data="categoryDataList"
@cell-mouse-enter="mouseEnter"
@cell-mouse-leave="mouseLeave"
>
<el-table-column
v-for="(item, index) in categoryColumList"
:key="index + 'i'"
:label="item.label"
:prop="item.prop"
:width="item.width"
:min-width="item.minWidth"
show-overflow-tooltip
/>
</el-table>
</div>
js
methods: {
// 鼠标进入
mouseEnter() {
this.autoPlay = false;
},
// 鼠标离开
mouseLeave() {
this.autoPlay = true;
},
startMove() {
// 拿到表格挂载后的真实DOM
const table = this.$refs.scroll_table;
if (table) {
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper;
if (divData) {
if (this.timer) {
clearInterval(this.timer);
}
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每20毫秒移动1像素)
this.timer = setInterval(() => {
if (this.autoPlay) {
// 元素自增距离顶部1像素
if (divData.scrollTop >= 33) {
const item = this.categoryDataList.shift();
this.categoryDataList.push(item);
divData.scrollTop -= 33;
}
divData.scrollTop += 1;
}
}, 20);
}
}
}
}