vue 表格组件 vxe-table 实现表格按回车键后自动新增一行

在数据录入场景中，用户常常需要连续添加多行记录（如订单明细、批量导入、财务分录）。vxe-table 提供了 keyboardConfig.isLastEnterAppendRow 配置，让用户在最后一行按回车键时自动追加新行，实现“录入-回车-继续录入”的流畅体验。
而当内置行为无法满足特定业务需求时，还可以通过 keyboardConfig.beforeEnterMethod 重写回车键的默认逻辑，实现更灵活的操作，例如新增行时预设默认值、限制最大行数、或根据当前列动态决定行为。

内置方案：isLastEnterAppendRow

isLastEnterAppendRow 是 keyboardConfig 中的布尔值配置，控制回车键在最后一行时的行为：

配置值	行为
true	最后一行按回车，自动在末尾新增一行，焦点移至新行第一列
false（默认）	按常规逻辑向下移动，到最后一行则循环到下一列

代码

需开启 keyboardConfig.isEnter 和编辑模式（editConfig），建议同时开启 keepSource: true。

<template>
  <div>
    <vxe-radio-group v-model="gridOptions.keyboardConfig.isLastEnterAppendRow">
      <vxe-radio-button :checked-value="true" content="回车键新增"></vxe-radio-button>
      <vxe-radio-button :checked-value="false" content="回车键向下右循环移动"></vxe-radio-button>
    </vxe-radio-group>

    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  height: 400,
  showOverflow: true,
  keepSource: true,
  columnConfig: {
    resizable: true
  },
  mouseConfig: {
    area: true // 是否开启区域选取
  },
  areaConfig: {
    multiple: true // 是否启用多区域选取功能
  },
  editConfig: {
    mode: 'cell', // 单元格编辑模式
    trigger: 'dblclick', // 双击单元格激活编辑状态
    showStatus: true
  },
  keyboardConfig: {
    isClip: true, // 是否开启复制粘贴
    isArrow: true, // 是否开启方向键功能
    isShift: true, // 是否开启同时按住方向键以活动区域为起始，向指定方向扩展单元格区域
    isTab: true, // 是否开启 Tab 键功能
    isEnter: true, // 是否开启回车键功能
    isEdit: true, // 是否开启任意键进入编辑（功能键除外）
    isBack: true, // 是否开启Backspace键功能
    isDel: true, // 是否开启删除键功能
    isEsc: true, // 是否开启Esc键关闭编辑功能
    isFNR: true, // 是否开启查找与替换
    isMerge: true, // 是否开启单元格合并功能
    isLastEnterAppendRow: true // 是否启用在最后一行按回车键自动新增行
  },
  columns: [
    { type: 'seq', fixed: 'left', width: 60 },
    { field: 'name', fixed: 'left', title: 'name', width: 200, editRender: { name: 'VxeInput' } },
    { field: 'role', title: 'Role', width: 200, editRender: { name: 'VxeInput' } },
    {
      field: 'sex',
      title: 'sex',
      width: 250,
      editRender: {
        name: 'VxeSelect',
        options: [
          { label: 'Man', value: '1' },
          { label: 'Women', value: '0' }
        ]
      }
    },
    { field: 'num1', title: 'Num1', width: 200, editRender: { name: 'VxeInput' } },
    { field: 'num2', title: 'Num2', minWidth: 250, editRender: { name: 'VxeInput' } },
    { field: 'num3', title: 'Num3', minWidth: 300, editRender: { name: 'VxeInput' } },
    { field: 'age', title: 'age', fixed: 'right', width: 100, editRender: { name: 'VxeInput' } },
    { field: 'address', title: 'Address', fixed: 'right', width: 300, editRender: { name: 'VxeInput' } }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: '1', num1: 12, num2: 21, num3: 78, age: 28, address: 'Shengzhen' },
    { id: 10002, name: 'Test2', role: 'Test', sex: '0', num1: 23, num2: 45, num3: 23, age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: '1', num1: 23, num2: 12, num3: 68, age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: '0', num1: 23, num2: 23, num3: 47, age: 24, address: 'Shanghai' },
    { id: 10005, name: 'Test5', role: 'Designer', sex: '0', num1: 32, num2: 77, num3: 65, age: 42, address: 'Guangzhou' },
    { id: 10006, name: 'Test6', role: 'Designer', sex: '1', num1: 39, num2: 66, num3: 87, age: 38, address: 'Shengzhen' },
    { id: 10007, name: 'Test7', role: 'Test', sex: '0', num1: 23, num2: 44, num3: 23, age: 24, address: 'Shengzhen' },
    { id: 10008, name: 'Test8', role: 'PM', sex: '1', num1: 23, num2: 23, num3: 87, age: 34, address: 'Shanghai' },
    { id: 10009, name: 'Test9', role: 'Designer', sex: '1', num1: 91, num2: 23, num3: 24, age: 52, address: 'Shanghai' },
    { id: 10010, name: 'Test10', role: 'Test', sex: '0', num1: 20, num2: 72, num3: 54, age: 44, address: 'Guangzhou' },
    { id: 10011, name: 'Test11', role: 'Designer', sex: '1', num1: 56, num2: 32, num3: 63, age: 52, address: 'Shanghai' },
    { id: 10012, name: 'Test12', role: 'Test', sex: '0', num1: 34, num2: 65, num3: 54, age: 47, address: 'Guangzhou' },
    { id: 10013, name: 'Test13', role: 'Test', sex: '0', num1: 39, num2: 65, num3: 435, age: 47, address: 'Guangzhou' },
    { id: 10014, name: 'Test14', role: 'Test', sex: '0', num1: 44, num2: 65, num3: 324, age: 45, address: 'Guangzhou' },
    { id: 10015, name: 'Test15', role: 'Test', sex: '0', num1: 45, num2: 56, num3: 54, age: 39, address: 'Guangzhou' },
    { id: 10016, name: 'Test16', role: 'Test', sex: '0', num1: 34, num2: 65, num3: 344, age: 44, address: 'Shanghai' },
    { id: 10017, name: 'Test17', role: 'Test', sex: '0', num1: 78, num2: 77, num3: 78, age: 48, address: 'Guangzhou' },
    { id: 10018, name: 'Test18', role: 'Test', sex: '0', num1: 32, num2: 12, num3: 45, age: 89, address: 'Shanghai' },
    { id: 10019, name: 'Test19', role: 'Test', sex: '0', num1: 42, num2: 65, num3: 8, age: 52, address: 'Guangzhou' },
    { id: 10020, name: 'Test20', role: 'Test', sex: '0', num1: 56, num2: 45, num3: 4, age: 41, address: 'Shanghai' },
    { id: 10021, name: 'Test21', role: 'Test', sex: '1', num1: 48, num2: 65, num3: 54, age: 49, address: 'Guangzhou' },
    { id: 10022, name: 'Test22', role: 'Test', sex: '0', num1: 41, num2: 65, num3: 12, age: 50, address: 'Shanghai' }
  ]
})
</script>

自定义方案：beforeEnterMethod 重写回车逻辑

当内置的“新增空行”无法满足需求时（例如需要预设默认值、限制最大行数、新增后定位到特定列），可以使用 beforeEnterMethod 完全接管回车键行为。

beforeEnterMethod 接收一个参数对象，通常包含当前行、列、事件等信息，返回 true 表示继续执行组件默认逻辑，返回 false 表示阻止默认行为，由开发者自行处理。

beforeEnterMethod 的具体参数签名请以当前 vxe-table 版本文档为准，以下示例基于常见用法编写，您可根据实际 API 调整。

const gridRef = ref()

const gridOptions = reactive({
  border: true,
  height: 400,
  keepSource: true,
  editConfig: {
    mode: 'cell',
    trigger: 'dblclick',
    showStatus: true
  },
  keyboardConfig: {
    isEnter: true,
    isEdit: true,
    isLastEnterAppendRow: true,   // 可同时保留内置行为作为兜底
    // ★ 自定义回车逻辑
    beforeEnterMethod({ row, rowIndex, column, $event }) {
      const $grid = gridRef.value
      if (!$grid) return true

      const fullData = $grid.getFullData()
      const isLastRow = rowIndex === fullData.length - 1

      // 仅在最后一行拦截
      if (isLastRow) {
        // 限制最大行数
        if (fullData.length >= 100) {
          VxeUI.modal.message({ content: '最多只能添加 100 行', status: 'warning' })
          return false   // 阻止默认新增
        }

        // 自定义新增行，并预设默认值
        const newRow = {
          name: '',
          role: 'Develop',          // 预设默认角色
          sex: '1',
          num1: 0,
          num2: 0,
          num3: 0,
          age: null,
          address: ''
        }
        $grid.insertAt(newRow, -1).then(() => {
          // 新增后自动定位到 name 列进入编辑
          const newRowIndex = fullData.length
          $grid.setEditCell(newRow, 'name')
        })
        return false   // 阻止组件默认行为，因为已手动处理
      }

      // 非最后一行，走默认逻辑（向下移动）
      return true
    }
  },
  columns: [
    { type: 'seq', fixed: 'left', width: 60 },
    { field: 'name', fixed: 'left', title: 'name', width: 200, editRender: { name: 'VxeInput' } },
    { field: 'role', title: 'Role', width: 200, editRender: { name: 'VxeInput' } },
    {
      field: 'sex',
      title: 'sex',
      width: 250,
      editRender: {
        name: 'VxeSelect',
        options: [
          { label: 'Man', value: '1' },
          { label: 'Women', value: '0' }
        ]
      }
    },
    { field: 'num1', title: 'Num1', width: 200, editRender: { name: 'VxeInput' } },
    { field: 'num2', title: 'Num2', minWidth: 250, editRender: { name: 'VxeInput' } },
    { field: 'num3', title: 'Num3', minWidth: 300, editRender: { name: 'VxeInput' } },
    { field: 'age', title: 'age', fixed: 'right', width: 100, editRender: { name: 'VxeInput' } },
    { field: 'address', title: 'Address', fixed: 'right', width: 300, editRender: { name: 'VxeInput' } }
  ],
  data: [ /* ... 同上 */ ]
})

• 说明：
  • 返回 false 阻止默认行为，返回 true 继续执行内置逻辑。
  • 可结合 insertAt 手动新增行，并使用 setEditCell 将焦点定位到指定列。
  • 可在此方法中实现行数限制、字段默认值、条件判断等业务规则。

两种方式

维度	isLastEnterAppendRow	beforeEnterMethod
配置复杂度	极简，一个布尔值	需编写函数逻辑
灵活性	固定行为（新增空行）	完全可控，可预设值、限制行数、定位列
适用场景	通用连续录入	有业务规则的录入（如默认值、上限、条件分支）
维护成本	低	中，需关注 API 参数变化

vxe-table 通过 isLastEnterAppendRow 提供了开箱即用的回车新增能力，而 beforeEnterMethod 则为复杂业务场景打开了自定义大门。两者结合，既能快速实现通用录入，又能灵活应对特殊规则。实际开发中，建议优先使用内置配置，仅当需要预设值、限制行数或条件分支时，再通过 beforeEnterMethod 重写逻辑。

https://vxetable.cn