vue3表格编辑(数据回显)和删除功能实现

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
 
const tableData = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  // ...更多数据
]);
 
// 编辑行数据
const handleEdit = (row) => {
  // 这里可以将row传递到编辑页面，或者使用Vue的响应式系统进行数据绑定
  console.log('编辑行数据:', row);
};
 
// 删除行数据
const handleDelete = (row) => {
  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 删除逻辑
    const index = tableData.value.findIndex(item => item === row);
    if (index !== -1) {
      tableData.value.splice(index, 1);
      ElMessage.success('删除成功！');
    }
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};
</script>

这个代码实例展示了如何在Vue 3中使用Element Plus UI框架实现表格的编辑和删除功能。编辑功能通过handleEdit方法实现，删除功能通过Element Plus的ElMessageBox组件实现，并且在确认删除后更新表格数据。这个例子简洁明了，并且遵循了现代Vue开发的最佳实践。