No.30 vue-element-admin 学习使用(二十五)集成vxe-table 别的编辑方式,插入数据

1,764 阅读2分钟

这是我参与8月更文挑战的第30天,活动详情查看:8月更文挑战

除了手动触发编辑,vxe-talbe还提供了别的编辑方式

弹框编辑

点击编辑后,弹出一个弹框,里面是一个表单,对表单的数据进行修改后,提交修改,完成编辑操作。

image.png 用到了vxe-table内的组件vxe-form,实现表单的功能

image.png 编辑完成后,用submitEvent方法来请求后端接口,实现对数据的修改。

点击编辑

有两种方式,1单元格编辑,2整行编辑

设置edit-config={trigger: 'click', mode: 'cell'} 启用单元格点击编辑的功能

设置edit-config={trigger: 'click', mode: 'row'} 启用行点击编辑的功能

点击表格内容的时候,会自动切换为编辑模式, image.png

设置edit-config={trigger: 'dblclick', mode: 'row'} 启用行双击编辑的功能 虽然官方没有说,但是同理可得 设置edit-config={trigger: 'dblclick', mode: 'cell'} 启用单元格双击编辑的功能

单元格占位符

设置 edit-render 启用占位符,当单元格内容为空的时候,则显示占位符的内容

image.png

插入数据

使用insert(), insertAt()可以插入临时的数据,

image.png 用法是这样的,默认在第一行新增,也可以传入参数,选择插入的位置,然后是一些获取数据的方法,最后是保存。来学习一下这些方法

image.png insertEvent方法接收row参数,可以为空,或者一条table的数据,或者为-1,为-1则在最后一行插入,调用$table的insertAt方法,返回一个row,调用table的setActiveCell方法,设置为active

getInsertRecords可以获取到插入的行数据,getCheckboxRecords可以获取到选中的行数据, getRecordset方法,可以同时获取到这些数据,在请求后端接口完成保存。

const { insertRecords, removeRecords, updateRecords } = $table.getRecordset()

删除数据

使用remove方法删除指定行的数据,$table.remove(row)

还原数据

表格设置keep-source后,就可以用revertData还原数据,但是开启这个配置项会影响表格的性能,影响的程度和表格数据量有关,使用方法直接调用就行

image.png