满口金牙 2022-12-27 14:01 采纳率: 92.3%
浏览 48
已结题

vue 自制滚动条思路请教

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

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-12-27 16:30
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 於黾 2022-12-27 14:16
    关注

    你都固定行数了,为什么还不分页,还搞滚动条作甚

    评论
  • 球球和皮皮 2022-12-27 15:53
    关注

    滚动条我印象直接css就可以搞定,不需要js吧,显示异常多半是height属性的问题,需要滚动的区域设置好height,height=100%或者height=calc(100% - npx)

    评论
  • 有问必答小助手 2022-12-28 15:19
    关注
    您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
    PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 1月5日
  • 已采纳回答 12月28日
  • 修改了问题 12月27日
  • 创建了问题 12月27日

悬赏问题

  • ¥15 STM32U575 pwm和DMA输出的波形少一段
  • ¥30 android百度地图SDK海量点显示标题
  • ¥15 windows导入environment.yml运行conda env create -f environment_win.yml命令报错
  • ¥15 这段代码可以正常运行,打包后无法执行,在执行for内容之前一直不断弹窗,请修改调整
  • ¥15 C语言判断有向图是否存在环路
  • ¥15 请问4.11到4.18以及4.27和4.29公式的具体推导过程是怎样的呢
  • ¥20 将resnet50中的卷积替换微ODConv动态卷积
  • ¥15 通过文本框输入商品信息点击按钮将商品信息列举出来点击加入购物车商品信息添加到表单中
  • ¥100 这是什么压缩算法?如何解压?
  • ¥20 upload上传实验报错500,如何解决?(操作系统-windows)