Vue+Element UI 实现增删改查：完整示例教程

{ "title": "Vue+Element UI 实现增删改查：完整示例教程", "description": "使用 Vue 和 Element UI 构建一个简单的增删改查表格示例，涵盖添加、编辑、删除操作，并提供详细代码和讲解。", "keywords": "Vue, Element UI, CRUD, 增删改查, 表格, 对话框, 表单, 教程, 示例", "content": ""使用 Vue 和 Element UI 构建一个简单的增删改查表格示例，涵盖添加、编辑、删除操作，并提供详细代码和讲解。\n\n1. 首先，安装 Vue 和 Element UI：\n\nbash\\nnpm install vue\\nnpm install element-ui\\n\n\n2. 创建一个 Vue 实例，并在其中引入 Element UI：\n\nhtml\\n<!DOCTYPE html>\\n<html lang=\"en\">\\n<head>\\n <meta charset=\"UTF-8\">\\n <title>CRUD Example</title>\\n <link rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\">\\n</head>\\n<body>\\n <div id=\"app\">\\n <el-button @click=\"showAddDialog\">添加</el-button>\\n <el-table :data=\"tableData\" style=\"width: 100%\">\\n <el-table-column prop=\"name\" label=\"姓名\"></el-table-column>\\n <el-table-column prop=\"age\" label=\"年龄\"></el-table-column>\\n <el-table-column label=\"操作\">\\n <template slot-scope=\"scope\">\\n <el-button @click=\"showEditDialog(scope.$index)\">编辑</el-button>\\n <el-button @click=\"deleteItem(scope.$index)\">删除</el-button>\\n </template>\\n </el-table-column>\\n </el-table>\\n <el-dialog :visible.sync=\"addDialogVisible\" title=\"添加\" @close=\"resetForm('addForm')\">\\n <el-form :model=\"addForm\" label-width=\"80px\">\\n <el-form-item label=\"姓名\">\\n <el-input v-model=\"addForm.name\"></el-input>\\n </el-form-item>\\n <el-form-item label=\"年龄\">\\n <el-input v-model=\"addForm.age\"></el-input>\\n </el-form-item>\\n </el-form>\\n <div slot=\"footer\">\\n <el-button @click=\"addDialogVisible = false\">取消</el-button>\\n <el-button type=\"primary\" @click=\"addItem\">确定</el-button>\\n </div>\\n </el-dialog>\\n <el-dialog :visible.sync=\"editDialogVisible\" title=\"编辑\" @close=\"resetForm('editForm')\">\\n <el-form :model=\"editForm\" label-width=\"80px\">\\n <el-form-item label=\"姓名\">\\n <el-input v-model=\"editForm.name\"></el-input>\\n </el-form-item>\\n <el-form-item label=\"年龄\">\\n <el-input v-model=\"editForm.age\"></el-input>\\n </el-form-item>\\n </el-form>\\n <div slot=\"footer\">\\n <el-button @click=\"editDialogVisible = false\">取消</el-button>\\n <el-button type=\"primary\" @click=\"updateItem\">确定</el-button>\\n </div>\\n </el-dialog>\\n </div>\\n <script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\\n <script src=\"https://unpkg.com/element-ui/lib/index.js\"></script>\\n <script>\\n new Vue({\\n el: '#app',\\n data: {\\n tableData: [\\n { name: '张三', age: 20 },\\n { name: '李四', age: 25 },\\n { name: '王五', age: 30 },\\n ],\\n addDialogVisible: false,\\n addForm: {\\n name: '',\\n age: ''\\n },\\n editDialogVisible: false,\\n editForm: {\\n name: '',\\n age: ''\\n },\\n editIndex: -1\\n },\\n methods: {\\n showAddDialog() {\\n this.addDialogVisible = true;\\n },\\n addItem() {\\n this.tableData.push({ name: this.addForm.name, age: this.addForm.age });\\n this.addDialogVisible = false;\\n this.resetForm('addForm');\\n },\\n showEditDialog(index) {\\n this.editIndex = index;\\n this.editForm.name = this.tableData[index].name;\\n this.editForm.age = this.tableData[index].age;\\n this.editDialogVisible = true;\\n },\\n updateItem() {\\n this.tableData[this.editIndex].name = this.editForm.name;\\n this.tableData[this.editIndex].age = this.editForm.age;\\n this.editDialogVisible = false;\\n this.resetForm('editForm');\\n },\\n deleteItem(index) {\\n this.tableData.splice(index, 1);\\n },\\n resetForm(formName) {\\n this.$refs[formName].resetFields();\\n }\\n }\\n })\\n </script>\\n</body>\\n</html>\\n\n\n这个示例中，我们创建了一个包含增删改查功能的表格。点击“添加”按钮会弹出一个对话框，可以输入姓名和年龄来添加一条数据；点击“编辑”按钮会弹出一个对话框，可以修改选中行的数据；点击“删除”按钮会删除选中行的数据。整个页面使用了 Element UI 提供的组件，如按钮、表格、对话框和表单等。在 Vue 的实例中，我们定义了一些数据和方法来实现相应的功能。\n