每一行都独立
<el-table-column label="操作" width="220" fixed="right">
<template #default="{ row, $index }">
<el-button
v-if="!row.tableEditFlag"
type="primary"
size="small"
@click="startEdit($index,row.id)"
>
编辑
</el-button>
<template v-else>
<el-button
type="success"
size="small"
@click="saveEdit($index,row.id)"
>
保存
</el-button>
<el-button
type="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('原始数据不存在,该行已被删除')
}
}