如何通过在element-ui table中单击shift键来select批处理行？

Question

我想通过点击shift键实现批量选择。我的解决方案是实现 keydown 和 keyup 监听事件。设置一个 var 来确定 shift 键是否按下。然后循环数据进行批量选择。

但是我遇到了问题 1. isShift 取不到正确的值，为什么？ 2.如果某列是可排序的，排序后获取数据会出现问题

https://codesandbox.io/s/editable-table-idea-g1pil

有什么建议吗？非常感谢！

Answer 1

我认为您需要更改代码。在方法 creaed 事件 onKeydown 中你使用匿名函数所以 this.isShift out of Vue data

created() {
    document.onkeydown = function(e) {
      var key = window.event.keyCode;
      if (key === 16) {
        this.isShift = true;
      }
    };
    document.onkeyup = function(e) {
      this.isShift = false;
    };
  },

应该是

created() {
    document.onkeydown = this.onKeyDown;
    document.onkeyup =this.onKeyUp;
  },
methods: {
    onKeyDown() {
      var key = window.event.keyCode;
      if (key === 16) {
        this.isShift = true;
      }
    },
    onKeyUp() {
       this.isShift = false;
    },
}

对不起，如果我的英语不好

如何通过在element-ui table中单击shift键来select批处理行？

How to select batch rows by clicking shift key down in element-ui table?

vue.js

element-ui