对于Vue和Element UI的
增删改查操作，一般可以按照以下步骤进行：
1. 引入Element UI组件和相关样式
在Vue组件中，需要先引入Element UI组件和相关的样式文件，比如：
```
import { Table, Button, Dialog, Form, FormItem, Input } from '
element-ui'
import '
element-ui/lib/theme-chalk/index.css'
```
2. 创建
数据列表
使用Table组件创建
数据列表，可以指定表头和
数据源，例如：
```
<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 slot-scope="scope">
<el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
```
其中，tableData是
数据源，handleEdit和handleDelete是编辑和删除操作的方法。
3. 创建弹窗
使用Dialog和Form组件创建弹窗，可以设置表单项和按钮，例如：
```
<el-dialog :visible.sync="dialogVisible">
<el-form :model="formData">
<el-form-item label="名称">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="formData.age"></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</el-dialog>
```
其中，dialogVisible是弹窗的显示状态，formData是表单
数据，handleSave是保存操作的方法。
4. 实现
增删改查操作
在Vue组件中，需要定义相关的方法来实现
增删改查操作，例如：
```
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
],
dialogVisible: false,
formData: {}
}
},
methods: {
handleAdd() {
this.formData = {}
this.dialogVisible = true
},
handleEdit(row) {
this.formData = { ...row }
this.dialogVisible = true
},
handleSave() {
// 保存操作
if (this.formData.id) {
// 编辑操作
const index = this.tableData.findIndex(item => item.id === this.formData.id)
this.tableData.splice(index, 1, this.formData)
} else {
// 新增操作
this.tableData.push({ ...this.formData, id: new Date().getTime() })
}
this.dialogVisible = false
},
handleDelete(row) {
// 删除操作
const index = this.tableData.findIndex(item => item.id === row.id)
this.tableData.splice(index, 1)
}
}
}
```
其中，handleAdd是新增操作的方法，handleSave用来保存新增或编辑的
数据，handleDelete用来删除
数据。在handleSave方法中，通过判断formData中是否有id属性来确定是新增还是编辑操作。如果有id属性，则表示是编辑操作，需要找到对应的
数据进行修
改；如果没有id属性，则表示是新增操作，需要将
数据添加到
数据源中。
3588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
