直播軟體搭建，vue3應用elementPlus table並滾動顯示

直播軟體搭建，vue3應用elementPlus table並滾動顯示

1、首先使用了element plus的table

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

2、設定定時器

<script setup>
import { reactive, onMounted, ref } from "vue";
import { getWaterData as getDataApi } from "@/modules/api/home";
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("el-scrollbar__wrap")[0];
  //滑鼠放上去，停止滾動；移開，繼續滾動
  dom1.addEventListener("mouseover", () => {
    isScroll = false;
  });
  dom1.addEventListener("mouseout", () => {
    isScroll = true;
  });
  setInterval(() => {
    if (isScroll) {
      dom1.scrollTop += 1;
      if (dom1.clientHeight + dom1.scrollTop == dom1.scrollHeight) {
        dom1.scrollTop = 0;
      }
    }
  }, 100);
};
</script>

 以上就是 直播軟體搭建，vue3應用elementPlus table並滾動顯示，更多內容歡迎關注之後的文章