记录可编辑表格（未完整）

每一行都独立

<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('原始数据不存在，该行已被删除')
    }
  }

原文地址：https://blog.csdn.net/m0_50337423/article/details/142354739

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！