对于表格的over-flow滚动条一直没有找到好的解决方案, (会滚动到行的一半的问题, 可以操作scroll 去修正但也不完美 )
即使是Ant design Ui 的table组件,也同样会有滚动到 半行的问题
目前我能想到的方案是:
表格行数是固定的,没有了over-flow
用slice(startRow, startRow + 表格行数) 显示数据,我只要修改startRow值 ,就可以切换数据
问题是需要自制一个滚动条:来更改startRow的值
下面尝试给 table 写一个滚动条 子组件,感觉有些复杂,
请教有什么简单实现的的思路
<template>
<div ref='scrolldivRef' class='scroll-div' :style="{ 'height': domHeigth + 'px', }" v-if="dataLength > rows">
<div class="scroll-block mouse-hover"
:style="{
'height': scrollBlockHeight + 'px',
'top': scrollBlockTop + 'px',
}"
@mousedown="tst($event)">
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted, inject, Ref } from 'vue';
interface Props {
dataLength: number; // 数据长度
rows: number; // 表格行数
domHeigth: number; // 表格的高度(不含表头)
}
const props = withDefaults(defineProps<Props>(), {
dataLength: 0,
})
const emit = defineEmits<{
(e: 'changeSelect', value: any): void
}>()
const start_row = inject<Ref<number>>('start_row')! // slice 的第一个参数,即表格的起始行在数据中的index,
const _tempRow = inject<Ref<number>>('_tempRow')! // 当前页中选择的行
const scrolldivRef = ref<HTMLDivElement>()
// 滑动块的高度
const scrollBlockHeight = computed(() => {
// 一页数据在滑动条所占位置,即滑动块的高度
const unit = Math.trunc(props.domHeigth / (props.dataLength / props.rows))
return unit > 10 ? unit : 10
})
// 滑动块距顶的距离
const scrollBlockTop = computed(() => {
// 顶部数据在滑动条的实际高度
const top = Math.trunc((props.domHeigth - scrollBlockHeight.value) * (start_row.value + _tempRow.value) / (props.dataLength - 1))
return top
})
// 拖动 改变start_row------------------------------------------------
let initPointY = 0, moveHeight = 0, init_row = start_row.value, moveRows = 0
function scrollMove(event: any) {
// 一行数据所占的像素
const Row = (props.domHeigth - scrollBlockHeight.value) / (props.dataLength - 1)
moveHeight = event.clientY - initPointY // 移动的垂直距离
moveRows = Math.trunc(moveHeight / Row)
// 向上移动至顶部时
if (start_row.value < 1 && moveHeight < 1) {
if (_tempRow.value > 0) {
// emit('changeSelect', moveHeight)
// _tempRow.value = init_row - moveRows
// console.log('sssssssss',_tempRow.value)
}
return start_row.value = 0
}
// 向下移动至底部时
if (start_row.value >= (props.dataLength - props.rows) && moveHeight > 0) {
if (_tempRow.value < props.rows - 1) {
_tempRow.value = _tempRow.value + 1
}
return start_row.value = (props.dataLength - props.rows)
}
start_row.value = init_row + moveRows
}
function scrollup() {
init_row = start_row.value
document.removeEventListener('mousemove', scrollMove)
document.removeEventListener("mouseup", scrollup); //监听鼠标抬起事件
}
function tst(e: any) {
initPointY = e.clientY
document.addEventListener("mousemove", scrollMove) //监听鼠标移动事件
document.addEventListener("mouseup", scrollup) //监听鼠标抬起事件
}
</script>
<style lang="scss" scoped>
.scroll-div {
position: absolute;
right: 0;
top: 26;
background-color: antiquewhite;
width: 20px;
.scroll-block {
position: absolute;
width: 20px;
background-color: rgb(117, 167, 132);
}
}
</style>
找到解决办法了, 不用这么复杂,table表格可以固定行,但滑动条完全可以用overflow, 然后把滑动条的 scrollTop 和 数据关联一下就可以了
