|
|
直播软件搭建，vue3应用elementPlus table并滚动显示
1、首先使用了element plus的table
<template>
<div>
<el-table
ref=&#34;table1&#34;
:data=&#34;state.data&#34;
height=&#34;250&#34;
>
<el-table-column prop=&#34;station&#34; label=&#34;站点&#34; width=&#34;90&#34; align=&#34;center&#34; />
<el-table-column prop=&#34;city&#34; label=&#34;地市&#34; width=&#34;55&#34; align=&#34;center&#34; />
<el-table-column prop=&#34;date&#34; label=&#34;日期&#34; width=&#34;75&#34; align=&#34;center&#34; />
<el-table-column prop=&#34;level&#34; label=&#34;等级&#34; width=&#34;70&#34; align=&#34;center&#34; />
</el-table>
</div>
</template>
2、设置定时器
<script setup>
import { reactive, onMounted, ref } from &#34;vue&#34;;
import { getWaterData as getDataApi } from &#34;@/modules/api/home&#34;;
const state = reactive({
data: [],
});
const table1 = ref();
onMounted(() => {
getDataApi().then((data) => {//获取数据
state.data = data;
scroll(table1.value.$refs.bodyWrapper);//设置滚动
});
});
</script>
<script>
//scroll方法不用对外，所以放在<script>里了
const scroll = (tableBody) => {
let isScroll = true;
const dom1 = tableBody.getElementsByClassName(&#34;el-scrollbar__wrap&#34;)[0];
//鼠标放上去，停止滚动；移开，继续滚动
dom1.addEventListener(&#34;mouseover&#34;, () => {
isScroll = false;
});
dom1.addEventListener(&#34;mouseout&#34;, () => {
isScroll = true;
});
setInterval(() => {
if (isScroll) {
dom1.scrollTop += 1;
if (dom1.clientHeight + dom1.scrollTop == dom1.scrollHeight) {
dom1.scrollTop = 0;
}
}
}, 100);
};
</script> 以上就是 直播软件搭建，vue3应用elementPlus table并滚动显示，更多内容欢迎关注之后的文章 |
|
发表于 2023-2-14 10:18:51