一、页面展示

1、概览

2、修改信息：value值出现录入框

二、代码

<template>

  <div class="button">
    <el-button type="primary" @click="handleEdit(row)">
      修改信息<el-icon class="el-icon--edit" ><Edit /></el-icon>
    </el-button>

    <el-button type="success" @click="handleSave(row)">
      保存修改<el-icon class="el-icon--save" ><Check /></el-icon>
    </el-button>

    <el-button type="success" @click="handleUpload">
      上传<el-icon class="el-icon--upload"><Upload /></el-icon>
    </el-button>
  </div>


  <div class="p-10">
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="Date"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
      <el-table-column label="Value">
        <template #default="scope">
          <span v-show="!scope.row.editing">{{ scope.row.value }} </span>
          <el-input v-show="scope.row.editing" v-model="scope.row.value"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="Operate">
        <template #default="{ row }">
          <el-button type="danger" link @click="handleDelete(row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox, ElNotification } from 'element-plus'

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    value: '1',
    editing: false
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    value: '2',
    editing: false
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    value: '3',
    editing: false
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    value: '4',
    editing: false
  }
])

const handleEdit = () => {
  tableData.value.forEach((item) => {
    item.editing = true
  })
}

const handleSave = () => {
  tableData.value.forEach((item) => {
    item.editing = false
  })
  console.log(tableData.value)
}

const handleDelete = (row) => {
  const index = tableData.value.indexOf(row)
  if (index !== -1) {
    tableData.value.splice(index, 1)
  }
}

const handleUpload = async () => {
  try {
    // 将更新后的数据发送到服务器
    const res = await fetch('/updateData', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(tableData.value)
    })
    // 处理服务器返回的响应
    if (res.ok) {
      console.log('数据上传成功')
      ElNotification({
        type: 'success',
        title: '数据上传成功',
        message: '更新的数据已经成功上传到服务器',
        position: 'top-left'
      })
    } else {
      console.error('数据上传失败')
      ElMessageBox.alert('数据上传失败，请联系管理员！', '上传失败', {
        confirmButtonText: '确定',
        position: 'top-right'
      })
    }
  } catch (err) {
    console.error(err)
    ElMessageBox.alert('数据上传失败，请联系管理员！', '上传失败', {
      confirmButtonText: '确定',
      position: 'top-right'
    })
  }
}
</script>

<style scoped>

.p-10,.button{
    width: 50%;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 20px;
    border-Top: "1px solid #007bff";
    border-Bottom: "1px solid #007bff"
  }
</style>