vxe-table 实现按回车键自动新增一行

在开发可编辑表格是，客户提了一个需求，默认情况下回车键是自动跳转下一行，当处于最后一行时，按下回车键需要自动新增一行。并将光标移动到新的行，实现也是非常简单的，vxe-table 新版本是支持这个功能的。
回车自动换行功能是通过参数 keyboard-config.isLastEnterAppendRow 来控制是否启用的。启用后按回车键就可以实现在最后一行按回车后自动在表尾追插入一行数据。
官网：https://vxetable.cn/
安装

1. npm install vxe-pc-ui@3.3.18 vxe-table@3.11.18

复制代码

1. // ...
2. import VxeUI from 'vxe-pc-ui'
3. import 'vxe-pc-ui/lib/style.css'
4. import VxeUITable from 'vxe-table'
5. import 'vxe-table/lib/style.css'
6. // ...
8. Vue.use(VxeUI)
9. Vue.use(VxeUITable)
10. // ...

复制代码

回车自动换行

通过参数 keyboard-config.isLastEnterAppendRow 是否开启回车自动换行功能

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

单元格选择与回车自动新增

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions"></vxe-grid>
4.   
5. </template><template>
6.   
7.     <vxe-grid v-bind="gridOptions"></vxe-grid>
8.   
9. </template><template>
10.   
11.     <vxe-grid v-bind="gridOptions"></vxe-grid>
12.   
13. </template>   

复制代码

https://gitee.com/x-extends/vxe-table

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！