vue 自制滚动条思路请教

Question

对于表格的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 和 数据关联一下就可以了

Answer 1

固定行数后实际和分页差不多，显示条数一定，可以计算出页数，滑动条宽度为100/页数，top参数和加载页数有关。设置为当前页-1/页数%基本就差不多了