el-table 方向键移动 高亮_el-table keydown

<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>