咖啡与喵 2025-07-04 12:32 采纳率: 100%
浏览 93
已结题

vue3-seamless-scroll实现el-table的无线滚动出了问题,不知道应该怎么解决


<template>
  <div class="task-container">
    <el-table class="board-table" style="height: 40px;" :row-class-name="tableRowClassName">
      <el-table-column label="任务名称" align="center" show-overflow-tooltip />
      <el-table-column label="任务数" align="center" />
      <el-table-column label="计划数" align="center" />
      <el-table-column label="完成数" align="center" />
      <el-table-column label="未完成数" align="center" />
      <el-table-column label="延期数" align="center" />
    </el-table>
    <Vue3SeamlessScroll :list="tableList" class="seamless-warp" :classOptions="classOptions">
      <el-table :data="tableList" class="board-table" :row-class-name="tableRowClassName" :show-header="false">
        <el-table-column label="任务名称" align="center" prop="taskName" show-overflow-tooltip />
        <el-table-column label="任务数" align="center" prop="taskNum" />
        <el-table-column label="计划数" align="center" prop="taskPlanNum" />
        <el-table-column label="完成数" align="center" prop="finished" />
        <el-table-column label="未完成数" align="center" prop="unfinished" />
        <el-table-column label="延期数" align="center" prop="delayNum" />
      </el-table>
    </Vue3SeamlessScroll>
  </div>
</template>
<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { computed } from 'vue'
const props = defineProps({
  tableData: {
    type: Array,
    default: () =>{
      return [
        { taskName: "任务1",taskNum: 32,taskPlanNum: 40,finished: 32,unfinished: 1,delayNum: 1 },
        { taskName: "任务2",taskNum: 32,taskPlanNum: 40,finished: 32,unfinished: 1,delayNum: 1 },
        { taskName: "任务3",taskNum: 32,taskPlanNum: 40,finished: 32,unfinished: 1,delayNum: 1 },
        { taskName: "任务4",taskNum: 32,taskPlanNum: 40,finished: 32,unfinished: 1,delayNum: 1 },
        { taskName: "任务5",taskNum: 32,taskPlanNum: 40,finished: 32,unfinished: 1,delayNum: 1 },
        { taskName: "任务6",taskNum: 32,taskPlanNum: 40,finished: 32,unfinished: 1,delayNum: 1 },
        { taskName: "任务7",taskNum: 32,taskPlanNum: 40,finished: 32,unfinished: 1,delayNum: 1 },
      ];
    }
  }
})
const tableList = props.tableData
let classOptions = computed(() =>{
  return {
    limitMoveNum: 5,
    hoverStop: true,
    direction: 1,
    step: 1,
    openWatch: true,
    waitTime: 2000
  }
})
function tableRowClassName ({row, rowIndex}) {
  if (rowIndex % 2 === 0) {
    return "table-row-one";
  }
  return "table-row-two";
}
</script>
<style scoped>
.task-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.board-table {
  color: #fff;
  background-color: #022244;
  border: 0px;
}

/* 替换深度选择器 */
:deep(.el-table__header-wrapper th),
:deep(.el-table__fixed-header-wrapper th) {
  color: #fff;
  background-color: #053f8b !important;
}

:deep(th.el-table__cell.is-leaf),
:deep(td.el-table__cell) {
  border: 0;
}

:deep(tr) {
  background-color: transparent;
}

.board-table::before {
  height: 0;
}

:deep(.el-table__body tr:hover>td.el-table__cell) {
  background-color: #2f6c94 !important;
}

:deep(.table-row-one) {
  background-color: #022244 !important;
}

:deep(.table-row-two) {
  background-color: rgba(95, 152, 220, 0.2) !important;
}

:deep(colgroup col[name="gutter"]) {
  display: none;
  width: 0;
}

:deep(th.gutter) {
  display: none;
  width: 0;
}

:deep(.el-table__body) {
  width: 100% !important;
}

.seamless-warp {
  height: calc(100% - 40px);
  width: 100%;

}

</style>
<style scoped lang="scss">
.board-table {
  // 使用:deep()替换深度选择器
  :deep(.el-table--scrollable-y::-webkit-scrollbar) {
    display: none !important; // 隐藏滚动条
  }
}
</style>

我使用了vue3的语法糖,自测vue3-seamless-scroll可以实现无限滚动,但是嵌套在el-table外就不能实现了。不知道问题在哪里,之前vue2的时候用vue-seamless-scroll还可以,迁移到vue3之后,也更换到了vue3-seamless-scroll,却不能转了。现在如下图静止不动了。

img

  • 写回答

7条回答 默认 最新

  • Nymph_Zhu 2025-07-04 15:14
    关注

    应该是你Vue3框架版本的问题,我使用我主页资源里面的Vue3框架再npm i vue3-seamless-scroll下载第三方包是可以实现无线自动滚动的

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(6条)

报告相同问题?

问题事件

  • 系统已结题 7月12日
  • 已采纳回答 7月4日
  • 创建了问题 7月4日