vxe-table踩坑记录

vxe-table踩坑记录

表格编辑功能

edit-config配置

editConfig:{trigger:'manual',mode:'row',showUpdateStatus:true,autoClear:false,}

开了显示更新状态字段，保存成功后，需要刷新可编辑单元格为已保存状态，否则数据更新成功且退出编辑状态，仍显示数据出于更新状态（左上角小红三角）。

// 局部更新单元格为已保存状态await$table.reloadRow(row,null,'businessDate');await$table.reloadRow(row,null,'machineWeight');

取消编辑时恢复数据

切勿在edit-closed事件中 实现/调用 取消编辑时恢复数据功能，因为保存方法中通常会使用$table.clearEdit()来清除编辑状态，$table.clearEdit()会主动触发edit-closed事件，会出现数据实际更新但显示的是修改前的数据。建议不主动配置edit-closed事件。

功能示例

操作栏

<vxe-table-column width="200px" field="operation" title="操作" fixed="right"> <template #default="{ row }"> <!-- 编辑状态：显示保存和取消按钮 --> <template v-if="hasEditStatus(row)"> <el-button type="text" size="small" @click.stop="handleSave(row)">保存</el-button> <el-button type="text" size="small" @click.stop="handleCancel(row)">取消</el-button> </template> <!-- 非编辑状态：显示修改按钮 --> <template v-else> <el-button type="text" size="small" @click.stop="handleEdit(row)">修改</el-button> </template> </template> </vxe-table-column>

修改

handleEdit(row){if(row.wmsStatus!==WMS_STATUS.PENDING_SUBMIT){this.$message.warning("仅待提交状态记录允许修改");return;}const$table=this.$refs.tableRef;if($table){$table.setEditRow(row);}},

保存

asynchandleSave(row){const$table=this.$refs.tableRef;if($table){// 判断单元格值是否被修改if($table.isUpdateByRow(row,'machineWeight')||$table.isUpdateByRow(row,'businessDate')){try{awaitpost(`${process.env.VUE_APP_API_SYSTEM}/requisition/edit`,{id:row.id,['machineWeight']:row['machineWeight'],['businessDate']:row['businessDate'],}).then((data)=>{this.$message.success(data&&data.msg?data.msg:"保存成功");}).catch((error)=>{this.$message.error(error&&error.message?error.message:error);return;});// 局部更新单元格为已保存状态await$table.reloadRow(row,null,'businessDate');await$table.reloadRow(row,null,'machineWeight');await$table.clearEdit()}catch(error){this.$message.error(error&&error.message?error.message:error);return;}}else{this.$message.warning("数据未修改，无需保存");}}}

取消

handleCancel(row){const$table=this.$refs.tableRef;if($table){$table.clearEdit().then(()=>{// 还原行数据$table.revertData(row);});}}