这是我参与8月更文挑战的第30天,活动详情查看:8月更文挑战
除了手动触发编辑,vxe-talbe还提供了别的编辑方式
弹框编辑
点击编辑后,弹出一个弹框,里面是一个表单,对表单的数据进行修改后,提交修改,完成编辑操作。
用到了vxe-table内的组件vxe-form,实现表单的功能
编辑完成后,用submitEvent方法来请求后端接口,实现对数据的修改。
点击编辑
有两种方式,1单元格编辑,2整行编辑
设置edit-config={trigger: 'click', mode: 'cell'} 启用单元格点击编辑的功能
设置edit-config={trigger: 'click', mode: 'row'} 启用行点击编辑的功能
点击表格内容的时候,会自动切换为编辑模式,
设置edit-config={trigger: 'dblclick', mode: 'row'} 启用行双击编辑的功能 虽然官方没有说,但是同理可得 设置edit-config={trigger: 'dblclick', mode: 'cell'} 启用单元格双击编辑的功能
单元格占位符
设置 edit-render 启用占位符,当单元格内容为空的时候,则显示占位符的内容
插入数据
使用insert(), insertAt()可以插入临时的数据,
用法是这样的,默认在第一行新增,也可以传入参数,选择插入的位置,然后是一些获取数据的方法,最后是保存。来学习一下这些方法
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还原数据,但是开启这个配置项会影响表格的性能,影响的程度和表格数据量有关,使用方法直接调用就行