vue3应用elementPlus table并滚动显示

Posted 2022-11-27 左直拳

效果类似

其实也没啥，代码部分，

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>

注意控制的dom是

table1.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0]

这是vue3中应用element plus 的table，网上许多教程 说控制this.$refs.table.bodyWrapper的，不好使，没有作用。