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


需求:弹出窗口表格需要通过键盘上下键选择数据,回车提交数据

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>

js代码:

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)//创建监听键盘事件
      })
    }
}


  • 本文作者:下载幸福
  • 本文链接:https://www.r5r6.com.cn/nose/947.html
  • 版权申明:除非特别说明,否则均为本站原创文章,转载或复制请注明出处。

PHPStorm 破解教程

php 如何处理 emoji 表情,保存到 mysql

评 论
更换验证码