首先，你需要安装
Vue3 和一个
表格组件库，如 Element Plus。
接着，你可以创建一个包含
表格数据的
Vue 组件，并在其中定义
增删改查的方法。例如：
```html
<template>
<div>
<el-button @click="showAddDialog">添加</el-button>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作">
<template #default="{ row }">
<el-button @click="showEditDialog(row)">编辑</el-button>
<el-button @click="deleteData(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="addDialogVisible">
<!-- 添加数据的表单 -->
</el-dialog>
<el-dialog :visible.sync="editDialogVisible">
<!-- 编辑数据的表单 -->
</el-dialog>
</div>
</template>
<script>
import { reactive } from '
vue'
import { ElMessage } from 'element-plus'
export default {
setup() {
const state = reactive({
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
],
addDialogVisible: false,
editDialogVisible: false,
editData: null
})
const showAddDialog = () => {
state.addDialogVisible = true
}
const showEditDialog = (row) => {
state.editData = { ...row }
state.editDialogVisible = true
}
const addData = (formData) => {
state.tableData.push(formData)
state.addDialogVisible = false
ElMessage.success('添加成功')
}
const editData = (formData) => {
const index = state.tableData.indexOf(state.editData)
state.tableData.splice(index, 1, formData)
state.editDialogVisible = false
ElMessage.success('编辑成功')
}
const deleteData = (row) => {
const index = state.tableData.indexOf(row)
state.tableData.splice(index, 1)
ElMessage.success('删除成功')
}
return {
state,
showAddDialog,
showEditDialog,
addData,
editData,
deleteData
}
}
}
</script>
```
在上面的代码中，我们使用了
Vue3 的 Composition API，通过 reactive 函数创建了一个响应式的状态对象 state，其中包含了
表格数据、添加和编辑对话框的可见性、正在编辑的数据等信息。
然后，我们定义了几个方法，包括显示添加对话框、显示编辑对话框、添加数据、编辑数据、删除数据等。这些方法会修改 state 对象中的数据，从而触发界面的更新。
最后，我们将这些方法和模板中的事件绑定起来，实现了一个简单的
增删改查的
表格。当用户点击添加按钮时，会显示一个对话框，让用户填写表单数据；当用户点击编辑按钮时，也会显示一个对话框，用来编辑当前行的数据；当用户点击删除按钮时，会直接删除当前行的数据。
最低0.47元/天 解锁文章
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
