获取el-table水平滚动条的坐标方法

79 阅读1分钟

// 通过键盘左右键,控制水平滚动条的移动。下面是代码实现

//我的el-table的ref名称为cs-ref

const csTable = ref(null);

// 定义按键处理函数,部分来自AI提示: const handleKeyDown = (event) => {

// 如果没有获取表格实例,则退出

if (!csTable.value) return;

// 获取表格滚动容器

const tableBodyWrapper = csTable.value.$el.querySelector('.el-table__body-wrapper');

// 如果没有获取到dom元素则退出 if (!tableBodyWrapper) return;

const scrollStep = 100; // 每次滚动的距离

if (event.key === 'ArrowRight') {

// 当按下鼠标右键时,向右移动滚动条,为当前距离+100。 csTable.value.setScrollLeft(csTable.value.scrollBarRef.wrapRef.scrollLeft + scrollStep)

} else if (event.key === 'ArrowLeft') {

// 当按下鼠标左键时,向左移动滚动条,为当前距离-100。 csTable.value.setScrollLeft(csTable.value.scrollBarRef.wrapRef.scrollLeft - scrollStep) }

}

// 当卸载页面时,取消监听

onUnmounted(() => {

// 移除键盘事件监听

window.removeEventListener('keydown', handleKeyDown);

});

// 当页面挂载完成后,添加监听:

onMounted(() => {

window.addEventListener('keydown', handleKeyDown);

});

逻辑不难,全文核心就是:

csTable.value.scrollBarRef.wrapRef.scrollLeft

这个可以获得水平滚动条的坐标,主要是这个卡了半天。

以上个人拙见,希望能在某些时刻帮助到相关的人。

加油!