Vue2按上下键选择表格行

·G|(

已于 2024-05-04 09:38:48 修改

阅读量86

点赞数

文章标签：前端 javascript 开发语言 vue.js

于 2024-05-04 09:33:39 首次发布

本文链接：https://blog.csdn.net/2202_75663419/article/details/138434975

版权

本文详细描述了一个Vue项目中，如何使用el-button实现表格的查询功能以及处理键盘事件（如上下箭头控制行选择和回车触发表单提交），通过监听keydown事件来管理用户在表格中的导航行为。

摘要由CSDN通过智能技术生成

//点击查询显示表格内容
<el-button
@click="onSubmit"
@keyup.prevent.native
@keydown.enter.prevent.native
>查询</el-button>   


data:
selectedIndex:0

methods:
//键盘方法
 keyDown(e1) {
      if (
        this.memberData &&
        this.memberData.length > 1 &&
        this.isSearched === false
      )    //如果搜索到表格里有内容则监听键盘
 {
        if (e1 && e1.keyCode == 38) {
          // 上键
          if (this.selectedIndex > 0) {
            // this.removeInputFocus(this.$refs.memberSearchInput);
            this.selectedIndex--;
          }
          // console.log("上键，selectedIndex：", this.selectedIndex);
          this.$refs.memberTable.setCurrentRow(
            this.$refs.memberTable.data[this.selectedIndex],
            true
          );
        } else if (e1 && e1.keyCode == 40) {
          // 下键
          if (this.selectedIndex < this.memberData.length - 1) {
            // this.removeInputFocus(this.$refs.memberSearchInput);
            this.selectedIndex++;
          }
          // console.log("下键，selectedIndex：", this.selectedIndex);
          this.$refs.memberTable.setCurrentRow(
            this.$refs.memberTable.data[this.selectedIndex],
            true
          );
        } else if (
          e1 &&
          e1.keyCode == 13 &&
          this.memberData &&
          this.isSearched === false &&
          this.$refs.memberTable.data[this.selectedIndex]
        ) {
          this.handleClickResult(
            this.$refs.memberTable.data[this.selectedIndex]
          );
        }
      }
    }


  mounted() {
    this.$nextTick(() => {
      window.addEventListener("keydown", this.keyDown);
    });
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.keyDown);
  },