// 通过键盘左右键,控制水平滚动条的移动。下面是代码实现
//我的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
这个可以获得水平滚动条的坐标,主要是这个卡了半天。
以上个人拙见,希望能在某些时刻帮助到相关的人。
加油!