直播软件搭建，vue3应用elementPlus table并滚动显示

直播软件搭建，vue3应用elementPlus table并滚动显示

1、首先使用了element plus的table

 

1

<template><br>  <div><br>    <el-table<br>      ref="table1"<br>      :data="state.data"<br>      height="250"<br>    ><br>      <el-table-column prop="station" label="站点" width="90" align="center" /><br>      <el-table-column prop="city" label="地市" width="55" align="center" /><br>      <el-table-column prop="date" label="日期" width="75" align="center" /><br>      <el-table-column prop="level" label="等级" width="70" align="center" /><br>    </el-table><br>  </div><br></template><br>

​

2、设置定时器

 

1

<script setup><br>import { reactive, onMounted, ref } from "vue";<br>import { getWaterData as getDataApi } from "@/modules/api/home";<br>const state = reactive({<br>  data: [],<br>});<br>const table1 = ref();<br>onMounted(() => {<br>  getDataApi().then((data) => {//获取数据<br>    state.data = data;<br>    scroll(table1.value.$refs.bodyWrapper);//设置滚动<br>  });<br>});<br></script><br><script><br>//scroll方法不用对外，所以放在<script>里了<br>const scroll = (tableBody) => {<br>  let isScroll = true;<br>  const dom1 = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];<br>  //鼠标放上去，停止滚动；移开，继续滚动<br>  dom1.addEventListener("mouseover", () => {<br>    isScroll = false;<br>  });<br>  dom1.addEventListener("mouseout", () => {<br>    isScroll = true;<br>  });<br>  setInterval(() => {<br>    if (isScroll) {<br>      dom1.scrollTop += 1;<br>      if (dom1.clientHeight + dom1.scrollTop == dom1.scrollHeight) {<br>        dom1.scrollTop = 0;<br>      }<br>    }<br>  }, 100);<br>};<br></script>

 

 以上就是 直播软件搭建，vue3应用elementPlus table并滚动显示，更多内容欢迎关注之后的文章