el-table鼠标滚轮左右或者上下滚动

学习让我快乐```

于 2024-08-12 10:47:52 发布

阅读量120

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_37225650/article/details/141122900

版权

为了实现横向的鼠标滚动，@wheel=“handleMouseWheel”

<el-table
    	:data="tableData"
        ref="tableRef"
        @wheel="handleMouseWheel"
 >

const tableRef = ref<TableInstance>();
    // 鼠标滚动
    const handleMouseWheel = (event: any) => {
        event.preventDefault(); // 阻止事件发生时浏览器默认的行为
        if (tableRef.value) {
            const table = (tableRef.value.$refs.scrollBarRef as any).wrapRef;
            if (table) {
                // 判断是横向还是纵向有滚动条,同时有则纵向优先
                if (table.scrollHeight > table.clientHeight) {
                    table.scrollTop += event.deltaY;
                } else if (table.scrollWidth > table.clientWidth) {
                    table.scrollLeft += event.deltaY;
                }
            }
        }
    };