<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,却不能转了。现在如下图静止不动了。
