vue + element 表格键盘上下键选择

最新推荐文章于 2024-07-11 15:49:17 发布

今夜大风

最新推荐文章于 2024-07-11 15:49:17 发布

阅读量965

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38425904/article/details/130360709

版权

文章介绍了一个Vue.js应用中的表格组件，用户可以通过键盘的上下键选择表格行，并使用回车键提交所选数据。代码示例展示了如何监听键盘事件并更新当前选中行。

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

需求：弹出窗口表格需要通过键盘上下键选择数据，回车提交数据
html代码：

<el-table
        border
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        size="mini"
        :data="companyData"
        @row-click="companyTableClick"
        ref="list"
        highlight-current-row
        maxHeight="400px"
        style="width: 100%;">
        <el-table-column
          prop="DWBM"
          label="编号"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="DWJC"
          label="简称"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="DWMC"
          label="单位名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="is_usemainquote"
          label="公司属性"
          align="center">
        </el-table-column>
      </el-table>

export default {
    data() {
      return {
        loading: false,
        companyData: [],
        nowIndex:0
      }
    },
    methods: {
      keyUp(e) {
        if (this.companyData.length == 0) {
          return
        }
        if (e.keyCode == 40) { // 下键
          if(this.companyData[this.nowIndex*1+1] != undefined){
            this.$refs.list.setCurrentRow(this.companyData[this.nowIndex*1+1])
            this.nowIndex = this.nowIndex*1+1
          }else{
            this.nowIndex = 0
            this.$refs.list.setCurrentRow(this.companyData[0])
          }
        }else if (e.keyCode == 38) { // 上键
          if(this.companyData[this.nowIndex*1-1] != undefined && this.nowIndex > 0){
            this.$refs.list.setCurrentRow(this.companyData[this.nowIndex*1-1])
            this.nowIndex = this.nowIndex*1-1
          }else{
            this.nowIndex = 0
            this.$refs.list.setCurrentRow(this.companyData[0])
          }
        }else if(e.keyCode == 13){ //回车
          this.$emit('selectedCompany', this.companyData[this.nowIndex])
        }
      },
      companyTableClick(row, column, cell, event) {
        this.$emit('selectedCompany', row)
      },
    },
    created() {
      this.$nextTick(()=>{
        addEventListener('keyup', this.keyUp)//创建监听键盘事件
      })
    }
}