每一行都独立
<el-table-column label="操作" width="220" fixed="right"><template #default="{ row, $index }"><el-buttonv-if="!row.tableEditFlag"type="primary"size="small"@click="startEdit($index,row.id)">编辑</el-button><template v-else><el-buttontype="success"size="small"@click="saveEdit($index,row.id)">保存</el-button><el-buttontype="danger"size="small"@click="cancelEdit($index,row.id)">取消</el-button></template></template>
</el-table-column>
// 使用深拷贝来保存原始数据const originalData = ref(JSON.parse(JSON.stringify(tableData.value)))const startEdit = (index,id?) => {if (originalData.value[index] == null) {originalData.value[index] = JSON.parse(JSON.stringify(tableData.value[index]))}tableData.value[index].tableEditFlag = true}const saveEdit = (index,id?) => {const row = tableData.value[index]row.tableEditFlag = false// 更新原始数据originalData.value[index] = JSON.parse(JSON.stringify(row))// 调用接口保存数据updateExcelData1Api(originalData.value[index]).then(res => {modal.msgSuccess('保存成功')})}const cancelEdit = (index,id?) => {if (originalData.value[index] != null) {// 使用深拷贝来恢复数据，确保不会相互影响tableData.value[index] = JSON.parse(JSON.stringify(originalData.value[index]))tableData.value[index].tableEditFlag = false} else {// 如果原始数据不存在，我们可以选择删除这一行或者重置为默认值// 这里选择删除这一行tableData.value.splice(index, 1)originalData.value.splice(index, 1)modal.msgWarning('原始数据不存在，该行已被删除')}}
