Vue通过el-table达成类windows上下选择文本滚动条监控以及手动滚动条挪动后定位
原创首先清楚windows文件管理逻辑
- 按 ↓ 键选择文件。如果文件已离开窗口,滚动条将准确向下滚动。

- 按 ↑ 当按键选择文件时,滚动条会准确地向上滚动。

当然,上述条件是文件在可视窗口内移动。
- 如果用户操作滚动条将文件与可视窗口分离、重新定位, 重新定位有两个规则:
{
a. 如果文件在可视窗口上方,请在文件位于可视窗口中之后找到过去的元素。
b. 如果文件在可视窗口下方, 文件被定位为视觉窗口中过去之后的最后一个元素。
}
我提到了上面的确切单词,所以让我们先删除上下键的默认事件。, 否则,他将自己控制进度条。
if (e.keyCode === 38 || e.keyCode === 40) {
e.preventDefault();
}
然后开始以下定位操作
HTML: 首选注册ref对于el-table
我跳过了绑定快捷键的事件, 除非有人让我添加
代码中的this.editIndex指当前文件的下标。
然后开始写逻辑:
scrollFileLocation() {
// 整个table的高度
const { tableHeight } = this;
// table桌子的头部高度
const tableHeader = 53;
const tableBodyHeight = tableHeight - tableHeader;
// 每个table元素的高度
const itemHeight = 64;
this.$nextTick(() => {
// 当前滚动条滚动的高度
let scrolled = this.$refs.multipleTable.bodyWrapper.scrollTop;
// 获取当前窗口的第一个元素的下标。
const start = Math.round(scrolled / itemHeight);
// 窗口可以显示的数据量
const showNum = tableBodyHeight / itemHeight;
// 获取当前窗口的最后一个元素的下标。
const end = Math.round(start + showNum) - 1;
// 文件完整显示的偏移量。
let offSet = 0;
// 如果滚动条移动很远,按向上和向下键将重新定位。
if (start - this.editIndex > 1) {
this.$refs.multipleTable.bodyWrapper.scrollTop = this.editIndex * itemHeight;
return;
}
if (this.editIndex - end > 1) {
this.$refs.multipleTable.bodyWrapper.scrollTop = (this.editIndex - showNum + 1) * itemHeight;
return;
}
// 如果上下选择文件大于窗口,则移动滚动条
if (this.editIndex < start) {
offSet = scrolled % itemHeight;
scrolled -= itemHeight + offSet;
} else if (this.editIndex > end) {
offSet = (scrolled + itemHeight * showNum) % itemHeight;
scrolled += itemHeight - offSet;
} else {
return;
}
this.$refs.multipleTable.bodyWrapper.scrollTop = scrolled;
});
}, 版权声明
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
itfan123



