el-table实现自动滚动；列表自动滚动

el-table的实现

javascript 复制代码

<template>
  <el-table
    v-loading="scrollLoading"
    :data="cameraList"
    ref="scrollTableOne"
    :header-cell-style="{ background: '#f1ff', color: 'red' }"
    :cell-style="{ background: '#fff', color: '#333333' }"
    style="height: 240px"
  >
    <template #empty>
      <!-- 空数据组件 -->
      <jg-empty :type="'noData'" />
    </template>
    <el-table-column prop="messageContent" label="消息描述" show-overflow-tooltip></el-table-column>
    <el-table-column prop="messageType" label="消息类型" show-overflow-tooltip>
      <template #default="scope">{{ scope.row?.messageType === "MT_NOTICE" ? "提醒类" : "操作类" }}</template>
    </el-table-column>
    <el-table-column width="170" prop="sendTime" label="消息时间" show-overflow-tooltip></el-table-column>
  </el-table>
</template>

<script setup>
import { ref, onMounted } from "vue"

let scrollLoading = ref(false);
let cameraList = ref([]);
const tableNode = ref(null);
let scrollTableOne = ref("");
// 函数
const getTableList = () => {
  cameraList.value = Array.from({ length: 10 }).map((ele, index) => {
    return {
      messageContent: '调度机构' + index,
      messageType: index,
      sendTime: + new Date()
    }
  })

  if (cameraList.value.length) {
    tableNode.value =
      scrollTableOne.value.$refs.bodyWrapper.getElementsByClassName(
        "el-scrollbar__wrap"
      )[0];
    const tableScroll = ref(true);
    tableNode.value.addEventListener("mouseover", () => {
      tableScroll.value = false;
    });
    tableNode.value.addEventListener("mouseout", () => {
      tableScroll.value = true;
    });
    setInterval(() => {
      if (tableScroll.value) {
        tableNode.value.scrollTop++;
        if (tableNode.value.clientHeight + tableNode.value.scrollTop === tableNode.value.scrollHeight) {
          tableNode.value.scrollTop = 0;
        }
      }
    }, 30);
  }

}
onMounted(() => {
  getTableList()
})
</script>

正常div通过v-for循环也可以实现

javascript 复制代码

<template>
  <div style="width: 400px">
    <div class="flex-between">
      <div>消息描述</div>
      <div>消息类型</div>
      <div>消息时间</div>
    </div>
    <div style="height: 240px; overflow-y: auto" ref="div_el">
      <div class="flex-between" style="height: 40px" v-for="(item, index) in cameraList" :key="index">
        <div>{{ item.messageContent }}</div>
        <div>{{ item.messageType }}</div>
        <div>{{ item.sendTime }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"

let cameraList = ref([]);
let div_el = ref("");
// 函数
const getTableList = () => {
  cameraList.value = Array.from({ length: 10 }).map((ele, index) => {
    return {
      messageContent: '调度机构' + index,
      messageType: index,
      sendTime: + new Date()
    }
  })

  if (cameraList.value.length) {
    const tableScroll = ref(true);
    div_el.value.addEventListener("mouseover", () => {
      tableScroll.value = false;
    });
    div_el.value.addEventListener("mouseout", () => {
      tableScroll.value = true;
    });
    setInterval(() => {
      if (tableScroll.value && div_el.value) {
        div_el.value.scrollTop++;
        if (div_el.value.clientHeight + div_el.value.scrollTop === div_el.value.scrollHeight) {
          div_el.value.scrollTop = 0;
        }
      }
    }, 30);
  }

}
onMounted(() => {
  getTableList()
})
</script>
<style scoped lang="scss">
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>