vue实现键盘上下选中数据

心肝到爆

已于 2024-08-07 16:15:32 修改

阅读量1.4k

点赞数 11

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js javascript 前端 vue elementui 前端框架

于 2024-06-08 10:27:47 首次发布

本文链接：https://blog.csdn.net/qq_52132550/article/details/139543322

vue实现键盘上下选中数据，添加修改数据到新列表中，回车 enter 进行确定并跳转到下一个

在这里插入图片描述

<template>
  <div>
    <!-- 键盘上下选择 -->
    <vxe-table
      ref="vxeTable"
      align="center"
      border
      resizable
      show-overflow
      size="mini"
      :data="data"
      :row-config="{ isHover: true, keyField: 'id' }"
      highlight-current-row
      :keyboard-config="{
        isArrow: true,
        isEnter: true,
        isEdit: true,
      }"
      @keydown="handleKeydown"
      :edit-config="{ trigger: 'click', mode: 'cell' }"
    >
      <vxe-column field="id" title="id" width="14%"></vxe-column>
      <vxe-column field="product" title="product" width="14%"></vxe-column>
      <vxe-column
        field="short_code"
        title="short_code"
        width="14%"
      ></vxe-column>
      <vxe-column
        field="default_supplier"
        title="default_supplier"
        width="14%"
      ></vxe-column>
      <vxe-column
        field="description"
        title="description"
        width="14%"
      ></vxe-column>
      <vxe-column
        field="branch_effective_stock"
        title="branch_effective_stock"
        width="14%"
      ></vxe-column>
      <vxe-column
        field="quantity"
        title="quantity"
        width="14%"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <te