以下是使用
ElementUI实现单表增删改查的示例代码：
1. 引入
ElementUI组件和axios库
```
html
<template>
<div>
<el-button type="primary" @click="showAddDialog">添加</el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<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="text" @click="showEditDialog(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="addDialogVisible" title="添加用户">
<el-form :model="addForm" :rules="addFormRules" ref="addForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="addForm.age"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleAdd">确 定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="editDialogVisible" title="编辑用户">
<el-form :model="editForm" :rules="editFormRules" ref="editForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="editForm.age"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleEdit">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
tableData: [], addDialogVisible: false,
editDialogVisible: false,
addForm: {
name: '',
age: ''
},
editForm: {
id: '',
name: '',
age: ''
},
addFormRules: {
name: [
{ required: true, m
essage: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, m
essage: '请输入年龄', trigger: 'blur' }
]
},
editFormRules: {
name: [
{ required: true, m
essage: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, m
essage: '请输入年龄', trigger: 'blur' }
]
}
}
},
mounted() {
this.getTableData();
},
methods: {
getTableData() {
axios.get('/api/user').then(res => {
this.tableData = res.data;
});
},
showAddDialog() {
this.addDialogVisible = true;
},
handleAdd() {
this.$refs.addForm.validate(valid => {
if (valid) {
axios.post('/api/user', this.addForm).then(res => {
this.getTableData();
this.addDialogVisible = false;
});
}
});
},
showEditDialog(row) {
this.editForm = Object.assign({}, row);
this.editDialogVisible = true;
},
handleEdit() {
this.$refs.editForm.validate(valid => {
if (valid) {
axios.put(`/api/user/${this.editForm.id}`, this.editForm).then(res => {
this.getTableData();
this.editDialogVisible = false;
});
}
});
},
handleDelete(row) {
this.$confirm('确认删除该用户吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.delete(`/api/user/${row.id}`).then(res => {
this.getTableData();
});
});
}
}
}
</script>
```
2. 编写后端API接口
```python
from flask import Flask, jsonify, request
app = Flask(__name__)
users = [
{'id': 1, 'name': '张三', 'age': 18},
{'id': 2, 'name': '李四', 'age': 20},
{'id': 3, 'name': '王五', 'age': 22},
]
@app.route('/api/user', methods=['GET'])
def get_users():
return jsonify(users)
@app.route('/api/user', methods=['POST'])
def add_user():
user = request.json
user['id'] = len(users) + 1
users.append(user)
return jsonify({'success': True})
@app.route('/api/user/<int:user_id>', methods=['PUT'])
def update_user(user_id):
user = next((u for u in users if u['id'] == user_id), None)
if user:
user.update(request.json)
return jsonify({'success': True})
else:
return jsonify({'success': False, 'm
essage': 'User not found'})
@app.route('/api/user/<int:user_id>', methods=['DELETE'])
def delete_user(user_id):
user = next((u for u in users if u['id'] == user_id), None)
if user:
users.remove(user)
return jsonify({'success': True})
else:
return jsonify({'success': False, 'm
essage': 'User not found'})
if __name__ == '__main__':
app.run()
```
3. 相关问题：
2613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
