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

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

找到更简单的方式

<template>
  <el-table
    v-tabIndex
    style="width: 100%; border: 1px solid #ebeef5"
    row-class-name="singleTableRow"
    :data="tableData"
  >
    <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>
</template>
 
  <script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    tabKeydown(e) {
      if (e.which == 40) {
        if (e.target.nextElementSibling) e.target.nextElementSibling.focus();
        e.preventDefault();
      } else if (e.which == 38) {
        if (e.target.previousElementSibling)
          e.target.previousElementSibling.focus();
        e.preventDefault();
      } else if (e.which == 13) {
        e.preventDefault();
      }
    },
  },
  directives: {
    tabIndex: {
      bind(el, binding, vnode) {
        const _this = vnode.context;
        _this.$nextTick(() => {
          let trNodes = el.querySelectorAll(
            ".el-table__body-wrapper > .el-table__body > tbody .singleTableRow"
          );
          Array.prototype.forEach.call(trNodes, (node, idx, list) => {
            node.setAttribute("tabindex", "0");
            node.onkeydown = _this.tabKeydown;
          });
        });
      },
      componentUpdated(el, binding, vnode) {
        const _this = vnode.context;
        _this.$nextTick(() => {
          let trNodes = el.querySelectorAll(
            ".el-table__body-wrapper > .el-table__body > tbody .singleTableRow"
          );
          Array.prototype.forEach.call(trNodes, (node, idx, list) => {
            node.setAttribute("tabindex", "0");
            node.onkeydown = _this.tabKeydown;
          });
        });
      },
    },
  },
};
</script>
<style>
.singleTableRow:focus {
  background-color: #f5f7fa !important;
}
</style>