以下代码基于上篇博客的基础进行优化，点此跳转进入：
一、增删改功能实现
- Create（新增）：
ElementUI 提供了多个用于数据新增的组件，包括表单（el-form）、输入框（el-input）、下拉选择框（el-select）等。您可以使用这些组件构建用于输入和提交新数据的表单界面。通常，您需要设置合适的表单验证规则（Validation Rules）来确保用户输入的数据有效。- Update（更新）：
要在 ElementUI 中执行数据更新操作，通常需要使用表格（el-table）或类似的列表组件来展示现有数据。用户可以在表格中选择要编辑的数据行，并通过弹出对话框或内联编辑单元格的方式来进行编辑。编辑完成后，需要触发更新操作将修改保存到后端服务器。- Delete（删除）：
删除数据通常涉及到确认删除的操作。ElementUI 提供了对话框组件（el-dialog）和确认框（el-messagebox）来处理删除确认。用户可以通过点击删除按钮触发删除操作，然后系统会提示用户确认删除。一旦用户确认删除，前端会向后端发送删除请求。
1.1 代码编写
在项目中的src文件下api中找到action.js进行配置数据访问的地址:
/** * 对后台请求的地址的封装，URL格式如下： * 模块名_实体名_操作 */ export default { 'SERVER': 'http://localhost:8080/', //服务器 'SYSTEM_USER_DOLOGIN': 'user/userLogin', //登陆 'SYSTEM_USER_DOREG': 'user/userRegister', //注册 'SYSTEM_MENUS': 'module/queryRootNode', //左侧菜单树 'BOOK_LIST': 'book/queryBookPager', //书籍列表 'BOOK_ADD': 'book/addBook', //书籍增加 'BOOK_UPD': 'book/editBook', //书籍修改 'BOOK_DEL': 'book/delBook', //书籍删除 'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用 return this.SERVER + this[k]; } }
在BookList.vue组件中进行编写增加修改的代码：
在ElementUI里面找到弹出窗进行编写增加修改的弹窗如下：
<!-- 4.编辑窗体 --> <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear"> <el-form :model="book" :rules="rules" ref="book"> <el-form-item label="书籍编号" :label-width="formLabelWidth" prop="id"> <el-input v-model="book.id" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname"> <el-input v-model="book.bookname" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price"> <el-input v-model="book.price" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype"> <el-select v-model="book.booktype" placeholder="请选择活动区域"> <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dosub">确 定</el-button> </div> </el-dialog>
在script标签中编写方法进行数据增加修改实现，在data中编写属性:
data() { return { bookname: '', tableData: [], rows: 10, page: 1, total: 0, title: '新增窗体', dialogFormVisible: false, formLabelWidth: '100px', types: [], form: {}, book: { id: '', bookname: '', price: '', booktype: '' }, } },
在script标签中编写方法进行数据增加修改实现，在methods中编写方法:
methods: { del(idx, row) { this.$confirm('此操作将永久删除id为' + row.id + '的数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let url = this.axios.urls.BOOK_DEL; this.axios.post(url, { id: row.id }) .then(r => { console.log(r); this.$message({ type: 'success', message: '删除成功!' }); this.query({}); }) .catch(e => { // 处理错误 }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, dosub() { this.$refs['book'].validate((valid) => { if (valid) { let url = this.axios.urls.BOOK_ADD; if (this.title == '编辑窗体') { url = this.axios.urls.BOOK_UPD; } // 构建请求参数 let params = { id: this.book.id, bookname: this.book.bookname, price: this.book.price, booktype: this.book.booktype }; console.log(params) console.log(url) this.axios.post(url, params) .then(r => { console.log(r); // 编辑/添加操作成功后，再进行查询 this.query({}); this.clear(); }) .catch(e => { // 处理错误 }); } else { console.log('error submit!!'); return false; } }); }, clear() { // 初始化窗体 this.dialogFormVisible = false; this.title = '新增窗体'; // 清空表单 this.book = { id: '', bookname: '', price: '', booktype: '' }; }, // 打开窗体的方法 open(idx, row) { // 打开编辑窗口 this.dialogFormVisible = true; // 初始化标题 this.title = '新增窗体'; if (row != null) { this.title = '编辑窗体'; } // 如果有传入行数据，将其填充到表单字段中 if (row) { this.book.id = row.id; this.book.bookname = row.bookname; this.book.price = row.price; this.book.booktype = row.booktype; } }, query(params) { let url = this.axios.urls.BOOK_LIST; this.axios.get(url, { params: params }).then(r => { console.log(r); this.tableData = r.data.rows; this.total = r.data.total; }).catch(e => { }) }, onSubmit() { let params = { bookname: this.bookname } this.query(params); }, handleSizeChange(r) { //当页大小发生变化 console.log("当前页大小为：" + r); let params = { bookname: this.bookname, rows: r, page: this.page } this.query(params); }, handleCurrentChange(p) { //当前页码发生变化 console.log("当前页页码为：" + p); let params = { bookname: this.bookname, rows: this.rows, page: p } this.query(params); } },
在created中初始化数据，如下：
created() { this.query({}); this.types = [{ id: 1, name: "刘三金" }, { id: 2, name: "小翰翰" }, { id: 3, name: "老黑鬼" }, { id: 4, name: "丧彪子" }, { id: 5, name: "死浩子" } ]; }
增加表格操作，如下：
<el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="open(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button> </template> </el-table-column>
最后的完整代码如下：
<template> <div class="books" style="padding: 25px;"> <!-- 1.搜索框 --> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="书籍名称"> <el-input v-model="bookname" placeholder="书籍名称"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> <el-button type="primary" @click="open">新增</el-button> </el-form-item> </el-form> <!-- 2.数据表格 --> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="id" label="书籍编号" width="180"> </el-table-column> <el-table-column prop="bookname" label="书籍名称" width="180"> </el-table-column> <el-table-column prop="price" label="书籍价格"> </el-table-column> <el-table-column prop="booktype" label="书籍类别"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="open(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 3.分页条 --> <div class="block"> <span class="demonstration"></span> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> <!-- 4.编辑窗体 --> <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear"> <el-form :model="book" :rules="rules" ref="book"> <el-form-item label="书籍编号" :label-width="formLabelWidth" prop="id"> <el-input v-model="book.id" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname"> <el-input v-model="book.bookname" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price"> <el-input v-model="book.price" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype"> <el-select v-model="book.booktype" placeholder="请选择活动区域"> <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dosub">确 定</el-button> </div> </el-dialog> </div> </template> <script> import axios from 'axios'; export default { data() { return { bookname: '', tableData: [], rows: 10, page: 1, total: 0, title: '新增窗体', dialogFormVisible: false, formLabelWidth: '100px', types: [], form: {}, book: { id: '', bookname: '', price: '', booktype: '' }, rules: { bookname: [{ required: true, message: '请输入书籍名称', trigger: 'blur' }, { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' } ], price: [{ required: true, message: '请输入书籍价格', trigger: 'blur' }], booktype: [{ required: true, message: '请输入书籍类别', trigger: 'blur' }] } } }, methods: { del(idx, row) { this.$confirm('此操作将永久删除id为' + row.id + '的数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let url = this.axios.urls.BOOK_DEL; this.axios.post(url, { id: row.id }) .then(r => { console.log(r); this.$message({ type: 'success', message: '删除成功!' }); this.query({}); }) .catch(e => { // 处理错误 }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, dosub() { this.$refs['book'].validate((valid) => { if (valid) { let url = this.axios.urls.BOOK_ADD; if (this.title == '编辑窗体') { url = this.axios.urls.BOOK_UPD; } // 构建请求参数 let params = { id: this.book.id, bookname: this.book.bookname, price: this.book.price, booktype: this.book.booktype }; console.log(params) console.log(url) this.axios.post(url, params) .then(r => { console.log(r); // 编辑/添加操作成功后，再进行查询 this.query({}); this.clear(); }) .catch(e => { // 处理错误 }); } else { console.log('error submit!!'); return false; } }); }, clear() { // 初始化窗体 this.dialogFormVisible = false; this.title = '新增窗体'; // 清空表单 this.book = { id: '', bookname: '', price: '', booktype: '' }; }, // 打开窗体的方法 open(idx, row) { // 打开编辑窗口 this.dialogFormVisible = true; // 初始化标题 this.title = '新增窗体'; if (row != null) { this.title = '编辑窗体'; } // 如果有传入行数据，将其填充到表单字段中 if (row) { this.book.id = row.id; this.book.bookname = row.bookname; this.book.price = row.price; this.book.booktype = row.booktype; } }, query(params) { let url = this.axios.urls.BOOK_LIST; this.axios.get(url, { params: params }).then(r => { console.log(r); this.tableData = r.data.rows; this.total = r.data.total; }).catch(e => { }) }, onSubmit() { let params = { bookname: this.bookname } this.query(params); }, handleSizeChange(r) { //当页大小发生变化 console.log("当前页大小为：" + r); let params = { bookname: this.bookname, rows: r, page: this.page } this.query(params); }, handleCurrentChange(p) { //当前页码发生变化 console.log("当前页页码为：" + p); let params = { bookname: this.bookname, rows: this.rows, page: p } this.query(params); } }, created() { this.query({}); this.types = [{ id: 1, name: "刘三金" }, { id: 2, name: "小翰翰" }, { id: 3, name: "老黑鬼" }, { id: 4, name: "丧彪子" }, { id: 5, name: "死浩子" } ]; } } </script> <style> </style>
1.2 效果演示
新增效果演示：
修改效果演示：
删除效果演示：
二、表单验证
2.1 加入表单验证指令
:rules="rules" ref="book"
解释：
:rules是用于表单验证的一个 Vue.js 指令。它通常用于表单元素，例如<input>或<el-input>组件，以定义验证规则。这些验证规则用于验证用户输入的数据是否符合预期的格式或要求。
2.2 配置表单验证规则
加入prop属性，如下：
prop="id"
具体来说，
prop属性用于指定要验证的表单项的属性名称。在这里，每个<el-form-item>对应一个表单字段（如书籍编号、书籍名称、书籍价格、书籍类别），prop属性用于定义每个字段应该验证的属性名称。
- 例如，对于书籍编号，
prop="id"表示该表单项验证的是book对象中的id属性。类似地，prop="bookname"表示验证book对象中的bookname属性，prop="price"表示验证book对象中的price属性，而prop="booktype"表示验证book对象中的booktype属性。- 这些
prop属性将与:model属性一起使用，:model属性指定了表单项的数据模型，即要验证的对象。同时，rules属性通常也会提供相应的验证规则。
在 Vue.js 和 Element UI 中，这种方式可以方便地实现表单验证，确保用户在提交表单时输入有效的数据。
2.3 编写验证规则
如下：
rules: { bookname: [{ required: true, message: '请输入书籍名称', trigger: 'blur' }, { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' } ], price: [{ required: true, message: '请输入书籍价格', trigger: 'blur' }], booktype: [{ required: true, message: '请输入书籍类别', trigger: 'blur' }] }
2.4 使用规则
this.$refs['book'].validate((valid) => { if (valid) { let url = this.axios.urls.BOOK_ADD; if (this.title == '编辑窗体') { url = this.axios.urls.BOOK_UPD; } // 构建请求参数 let params = { id: this.book.id, bookname: this.book.bookname, price: this.book.price, booktype: this.book.booktype }; console.log(params) console.log(url) this.axios.post(url, params) .then(r => { console.log(r); // 编辑/添加操作成功后，再进行查询 this.query({}); this.clear(); }) .catch(e => { // 处理错误 }); } else { console.log('error submit!!'); return false; } });
2.5 效果展示
最后使用ElementUI之CUD+表单验证就到这里，祝大家在敲代码的路上一路通畅!
