<template>
<div class="main">
<el-table
ref="tree"
:data="tableData"
height="500"
highlight-current-row
style="width: 100%"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
<el-button @click="get">获取</el-button>
</div>
</template>
<script>
export default {
mounted() {
for (let i = 0; i < 100; i++) {
this.tableData.push({
date: "2016-05-02",
name: "王小虎" + i,
address: "上海市普陀区金沙江路 1518 弄",
});
}
let _this = this;
this.setCurRow(this.tableData[0])
window.addEventListener("keydown", (e) => {
if (!_this.currow) return;
if (!this.$refs.tree) return;
const Tbody = _this.$refs.tree.$el.querySelector(
".el-table__body-wrapper> table > tbody"
);
if (e.keyCode == 37) {
//左
e.preventDefault();
} else if (e.keyCode == 38) {
//上
for (let i in _this.tableData) {
if (_this.tableData[i] == _this.currow) {
if (i > 0) {
_this.setCurRow(_this.tableData[Number(i) - 1]);
break;
}
}
}
setTimeout(() => {
let jlTop = document.getElementsByClassName("current-row")[0];
let action = _this.elementInView(jlTop);
if (action) {
Tbody.querySelector(".el-table__row.current-row").scrollIntoView({
behavior: "instant",
block: "start",
inline: "nearest",
});
}
});
e.preventDefault();
} else if (e.keyCode == 40) {
//下
for (let i in _this.tableData) {
if (_this.tableData[i] == _this.currow) {
if (i < _this.tableData.length - 1) {
_this.setCurRow(_this.tableData[Number(i) + 1]);
break;
}
}
}
setTimeout(() => {
let jlTop = document.getElementsByClassName("current-row")[0];
let action = _this.elementInView(jlTop);
if (action) {
Tbody.querySelector(".el-table__row.current-row").scrollIntoView({
behavior: "instant",
block: "end",
inline: "nearest",
});
}
}, 0);
e.preventDefault();
} else if (e.keyCode == 13) {
//回车
}
});
},
watch: {},
data() {
return {
tableData: [],
currow: null,
};
},
directives: {},
computed: {},
methods: {
init() {},
setCurRow(aRow) {
if (this.$refs.tree) {
this.$refs.tree.setCurrentRow(aRow);
}
this.currow = aRow;
},
elementInView(element) {
const top = element.offsetTop; //目标元素距离顶部高度
let text = "";
let scrollTop = this.$refs.tree.bodyWrapper.scrollTop; //滚动条高度
const Tbody = this.$refs.tree.$el.querySelector(
".el-table__body-wrapper> table > tbody"
);
const viewEl = this.$refs.tree.$el.querySelector(
".el-table__body-wrapper"
);
let viewHeight = viewEl.getBoundingClientRect().height;
let TbodyHeight = Tbody.getBoundingClientRect().height;
if (
top >= scrollTop &&
TbodyHeight - top - element.getBoundingClientRect().height >
TbodyHeight - viewHeight - scrollTop
) {
text = "";
} else {
if (top > scrollTop) {
text = "bottom";
} else {
text = "top";
}
}
return text;
},
get() {},
},
created() {},
};
</script>
el-table 方向键移动 高亮
最新推荐文章于 2024-04-18 14:59:37 发布