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

最新推荐文章于 2025-03-13 14:59:12 发布

学习让我快乐```

最新推荐文章于 2025-03-13 14:59:12 发布

阅读量361

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/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;
                }
            }
        }
    };