el-table 方向键移动高亮

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