Element-UI（增删改查）

ゞ 浴缸里的玫瑰 2024-02-23 04:23 116阅读 0赞

一、导言

1、引言

增删改是计算机编程和数据库管理中常用的三个操作，使用增删改操作可以帮助我们管理和维护系统或数据库中的数据，确保数据的准确性、完整性和一致性。它们是编程和数据库管理中非常常用的操作，有助于提高系统的灵活性和可维护性。

它们的作用：

增加（Add）：通过增加操作，可以向系统或数据库中添加新的数据或功能。这对于扩展系统的能力和功能非常重要。例如，在一个学生成绩管理系统中，可以通过增加操作添加新的学生信息。
删除（Delete）：删除操作可以从系统或数据库中移除不需要的数据或功能。这对于清理和维护数据的一致性非常重要。例如，在一个在线商城的数据库中，可以通过删除操作将已下架或过期的商品从数据库中移除。
修改（Update）：修改操作可以对系统或数据库中已有的数据或功能进行更新或更改。这可以帮助保持数据的准确性和完整性。例如，在一个员工信息管理系统中，可以通过修改操作更新员工的工资信息。

2、作用

Element UI 是一个基于 Vue.js 的桌面端组件库，它提供了一套丰富的用户界面组件，包括表格、表单、对话框等，用于快速构建现代化的Web应用程序。

Element UI 中使用增删改操作主要有以下作用：

增加（Add）：在 Element UI 中，可以利用表单组件和对话框组件来实现数据的添加功能。通过表单组件，我们可以收集用户输入的数据，并通过提交操作将数据添加到数据库或服务器中。通过对话框组件，我们可以展示一个弹窗来收集用户输入的数据，然后将数据添加到系统中。
删除（Delete）：在 Element UI 中，可以利用表格组件和对话框组件来实现数据的删除功能。通过表格组件，我们可以展示系统中已有的数据，并提供删除按钮供用户操作，当用户点击删除按钮时，可以弹出对话框来确认删除操作，并在确认后将数据从数据库或服务器中删除。
修改（Update）：在 Element UI 中，可以利用表单组件和对话框组件来实现数据的修改功能。通过表单组件，我们可以展示系统中已有的数据，并提供编辑按钮供用户操作，当用户点击编辑按钮时，可以弹出对话框展示数据的编辑界面，并在用户提交修改后将数据更新到数据库或服务器中。
增删改操作可以帮助我们在 Element UI 中实现对数据的管理和维护。无论是添加新数据、删除旧数据还是修改现有数据，都可以通过 Element UI 提供的组件和功能快速实现，并提供友好的用户界面和交互体验。这有助于加快开发速度，提高系统的可用性和易用性。

二、CUD

1、增加修改

在这之前我们要写好我们的后端代码，以便我们进行之后的操作

1.1、添加弹窗

首先进入我们的组件 | Element的官网，找到我们的弹窗组件。下面我也提供了。

  1. <el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
  2. <!--    弹窗-->
  3.     <el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear">
  4.       <el-form :model="book">
  5.         <el-form-item label="书籍名称" :label-width="formLabelWidth">
  6.           <el-input v-model="book.bookname" autocomplete="off"></el-input>
  7.         </el-form-item>
  8.         <el-form-item label="书籍价格" :label-width="formLabelWidth">
  9.           <el-input v-model="book.price" autocomplete="off"></el-input>
  10.         </el-form-item>
  12.         <el-form-item label="书籍类型" :label-width="formLabelWidth">
  13.           <el-select v-model="book.booktype" placeholder="请选择活动区域">
  14.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
  15.           </el-select>
  16.         </el-form-item>
  17.       </el-form>
  18.       <div slot="footer" class="dialog-footer">
  19.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  20.         <el-button type="primary" @click="editSubmit">确 定</el-button>
  21.       </div>
  22.     </el-dialog>
1.2、定义变量
  1. data() {
  2.     return {
  3.       // 是否打开弹窗
  4.       dialogFormVisible: false,
  5.       // 弹窗标题
  6.       title: '新增页面',
  7.       // 定义数组接收数据
  8.       book:
  9.         {id: '', bookname: '', price: '', booktype: ''}
  10.       ,
  11.       // 类型
  12.       types: [],
  13.       // 输入框长度
  14.       formLabelWidth: '100px',
  16.     }
  17.   }
1.3、定义方法
  1. // 初始化方法
  2.     clear() {
  3.       this.dialogFormVisible = false;
  4.       this.title = '新增页面';
  5.       this.book = {
  6.         id: '',
  7.         bookname: '',
  8.         price: '',
  9.         booktype: ''
  10.       }
  11.     }
  12.     // 编辑
  13.     handleEdit(index, row) {
  14.       this.dialogFormVisible = true;
  16.       if (row) {
  17.         this.title = '编辑页面';
  18.         this.book.id = row.id;
  19.         this.book.bookname = row.bookname;
  20.         this.book.price = row.price;
  21.         this.book.booktype = row.booktype;
  22.       }
  24.     }
  25.     // 增加修改提交
  26.     editSubmit() {
  28.       //表单验证
  29.       this.$refs['book'].validate((valid) => {
  30.         if (valid) {
  31.           //验证通过执行增加修改方法
  33.           let params = {
  34.             id: this.book.id,
  35.             bookname: this.book.bookname,
  36.             price: this.book.price,
  37.             booktype: this.book.booktype
  38.           }
  40.           //获取后台请求书籍数据的地址
  41.           let url = this.axios.urls.BOOK_ADD;
  43.           if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
  44.             url = this.axios.urls.BOOK_EDIT;
  45.           }
  46.           this.axios.post(url, params).then(r => {
  47.             this.clear();//关闭窗口
  48.             this.query({});//刷新
  49.           }).catch(e => {
  51.           });
  52.         } else {
  53.           // console.log('error submit!!');
  54.           return false;
  55.         }
  56.       });
  58.     }
  59.   created() {
  60.     this.types = [{id: 1, name: '玄幻'},
  61.       {id: 2, name: '计算机'},
  62.       {id: 3, name: '散文'},
  63.       {id: 4, name: '古典'},
  64.       {id: 5, name: '文学'},
  65.       {id: 6, name: '教育'},
  66.       {id: 7, name: '悬疑'},]
  67. //初始化查询的方法
  68.     this.query({})
  69.   }
1.4、完整代码
  1. <template>
  2.   <div class="Book" style="padding: 30px;">
  3.     <!-- 输入框搜索 -->
  4.     <el-form :inline="true" class="demo-form-inline">
  5.       <el-form-item label="书籍名称 : ">
  6.         <el-input v-model="bookname" placeholder="书籍名称"></el-input>
  7.       </el-form-item>
  8.       <el-form-item>
  9.         <el-button type="primary" plain @click="onSubmit">查询</el-button>
  10.         <el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
  11.       </el-form-item>
  12.     </el-form>
  13.     <!-- 书籍的书籍表格 -->
  14.     <el-table :data="tableData" style="width: 100%">
  15.       <el-table-column prop="id" label="书籍ID"></el-table-column>
  16.       <el-table-column prop="bookname" label="书籍名称"></el-table-column>
  17.       <el-table-column prop="price" label="书籍价格"></el-table-column>
  18.       <el-table-column prop="booktype" label="书籍类型"></el-table-column>
  19.       <el-table-column label="操作" min-width="180">
  20.         <template slot-scope="scope">
  21.           <el-button size="mini" icon="el-icon-edit-outline" type="primary"
  22.                      @click="handleEdit(scope.$index, scope.row)">编 辑
  23.           </el-button>
  24.           <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删
  25.             除
  26.           </el-button>
  27.         </template>
  28.       </el-table-column>
  29.     </el-table>
  30.     <!-- 分页 -->
  31.     <div class="block" style="padding: 20px;">
  32.       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
  33.                      background :page-sizes="[10, 20, 30, 40]" :page-size="rows"
  34.                      layout="total, sizes, prev, pager, next, jumper"
  35.                      :total="total">
  36.       </el-pagination>
  37.     </div>
  38.     <!--    弹窗-->
  39.     <el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear">
  40.       <el-form :model="book">
  41.         <el-form-item label="书籍名称" :label-width="formLabelWidth">
  42.           <el-input v-model="book.bookname" autocomplete="off"></el-input>
  43.         </el-form-item>
  44.         <el-form-item label="书籍价格" :label-width="formLabelWidth">
  45.           <el-input v-model="book.price" autocomplete="off"></el-input>
  46.         </el-form-item>
  48.         <el-form-item label="书籍类型" :label-width="formLabelWidth">
  49.           <el-select v-model="book.booktype" placeholder="请选择活动区域">
  50.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
  51.           </el-select>
  52.         </el-form-item>
  53.       </el-form>
  54.       <div slot="footer" class="dialog-footer">
  55.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  56.         <el-button type="primary" @click="editSubmit">确 定</el-button>
  57.       </div>
  58.     </el-dialog>
  59.   </div>
  61. </template>
  63. <script>
  64. export default {
  65.   data() {
  66.     return {
  67.       bookname: '',
  68.       tableData: [],
  69.       rows: 10,
  70.       total: 0,
  71.       page: 1,
  72.       // 是否打开弹窗
  73.       dialogFormVisible: false,
  74.       // 弹窗标题
  75.       title: '新增页面',
  76.       // 定义数组接收数据
  77.       book:
  78.         {id: '', bookname: '', price: '', booktype: ''}
  79.       ,
  80.       // 类型
  81.       types: [],
  82.       // 输入框长度
  83.       formLabelWidth: '100px',
  84.     }
  85.   },
  86.   methods: {
  87.     // 初始化方法
  88.     clear() {
  89.       this.dialogFormVisible = false;
  90.       this.title = '新增页面';
  91.       this.book = {
  92.         id: '',
  93.         bookname: '',
  94.         price: '',
  95.         booktype: ''
  96.       }
  97.     },
  98.     // 编辑
  99.     handleEdit(index, row) {
  100.       this.dialogFormVisible = true;
  102.       if (row) {
  103.         this.title = '编辑页面';
  104.         this.book.id = row.id;
  105.         this.book.bookname = row.bookname;
  106.         this.book.price = row.price;
  107.         this.book.booktype = row.booktype;
  108.       }
  110.     },
  111.     // 增加修改提交
  112.     editSubmit() {
  114.       let params = {
  115.         id: this.book.id,
  116.         bookname: this.book.bookname,
  117.         price: this.book.price,
  118.         booktype: this.book.booktype
  119.       }
  121.       //获取后台请求书籍数据的地址
  122.       let url = this.axios.urls.BOOK_ADD;
  124.       if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
  125.         url = this.axios.urls.BOOK_EDIT;
  126.       }
  127.       this.axios.post(url, params).then(r => {
  128.         this.clear();//关闭窗口
  129.         this.query({});//刷新
  130.       }).catch(e => {
  132.       });
  134.     },
  135.     handleSizeChange(r) {
  136.       //当页大小发生变化
  137.       let params = {
  138.         bookname: this.bookname,
  139.         rows: r,
  140.         page: this.page
  141.       }
  142.       this.query(params);
  143.     },
  144.     handleCurrentChange(p) {
  145.       //当前页码大小发生变化
  146.       let params = {
  147.         bookname: this.bookname,
  148.         rows: this.rows,
  149.         // 分页
  150.         page: p
  151.       }
  152.       // console.log(params)
  153.       this.query(params);
  154.     },
  155.     query(params) {
  156.       //获取后台请求书籍数据的地址
  157.       let url = this.axios.urls.BOOK_BOOKLIST;
  158.       this.axios.get(url, {
  159.         params: params
  160.       }).then(d => {
  161.         this.tableData = d.data.rows;
  162.         this.total = d.data.total;
  163.       }).catch(e => {
  165.       });
  167.     },
  168.     onSubmit() {
  169.       let params = {
  170.         bookname: this.bookname
  171.       }
  172.       console.log(params)
  173.       this.query(params);
  174.       this.bookname = ''
  175.     }
  176.   },
  177. //初始化调用
  178.   created() {
  179.     this.types = [{id: 1, name: '玄幻'},
  180.       {id: 2, name: '计算机'},
  181.       {id: 3, name: '散文'},
  182.       {id: 4, name: '古典'},
  183.       {id: 5, name: '文学'},
  184.       {id: 6, name: '教育'},
  185.       {id: 7, name: '悬疑'},]
  186.     this.query({})
  187.   }
  188. }
  189. </script>
  191. <style>
  192. </style>

514d022763864365b02bdf626c8bbb70.png

75dcd59b2fdd4f5fbb6b32efcb787e73.png

2、删除

2.1、定义方法
  1. // 删除
  2.     handleDelete(index, row) {
  3.       console.log(index, row)
  4.       let url = this.axios.urls.BOOK_DEL;
  5.       this.axios.post(url, {id: row.id}).then(d => {
  6.         this.query({})
  7.         this.$message({
  8.           message: '恭喜你，删除成功',
  9.           type: 'success'
  10.         });
  11.       }).catch(e => {
  12.         this.$message('已取消');
  13.       });
  14.     }

8b29af569d014e99952583883fd865f4.png

三，表单验证

1、添加规则

需要在elementui里面的form表单里面添加:model=”book” :rules=”rules” ref=”book”，:model和ref必须是一样的

  1. <el-form :model="book" :rules="rules" ref="book">

在里面添加prop属性

794cbdcf49d3428dbca96b0c03e57c46.png

2、定义规则

  1. //表单验证
  2.       rules: {
  3.         //定义验证格式
  4.         bookname: [
  5.           {required: true, message: '请输入书籍名称', trigger: 'blur'},
  6.           {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
  7.         ],
  8.         price: [
  9.           {required: true, message: '请输入书籍价格', trigger: 'change'},
  10.           {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
  11.         ],
  12.         booktype: [
  13.           {required: true, message: '请输入书籍类型', trigger: 'blur'}
  14.         ]
  15.       }

3.提交事件

在提交的事件里面添加

  1.  this.$refs[formName].validate((valid) => {
  2.           if (valid) {
  3.             alert('submit!');
  4.           } else {
  5.             console.log('error submit!!');
  6.             return false;
  7.           }
  8.         });

formName：form里面:model=”book” 或者ref=”book” 的名字

  1. // 增加修改提交
  2.     editSubmit() {
  4.       //表单验证
  5.       this.$refs['book'].validate((valid) => {
  6.         if (valid) {
  7.           //验证通过执行增加修改方法
  9.           let params = {
  10.             id: this.book.id,
  11.             bookname: this.book.bookname,
  12.             price: this.book.price,
  13.             booktype: this.book.booktype
  14.           }
  16.           //获取后台请求书籍数据的地址
  17.           let url = this.axios.urls.BOOK_ADD;
  19.           if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
  20.             url = this.axios.urls.BOOK_EDIT;
  21.           }
  22.           this.axios.post(url, params).then(r => {
  23.             this.clear();//关闭窗口
  24.             this.query({});//刷新
  25.           }).catch(e => {
  27.           });
  28.         } else {
  29.           // console.log('error submit!!');
  30.           return false;
  31.         }
  32.       });
  35.     }

当你的规则必配了就执行你的增加修改的方法，或者其他的方法

4、前端完整代码

  1. <template>
  2.   <div class="Book" style="padding: 30px;">
  3.     <!-- 输入框搜索 -->
  4.     <el-form :inline="true" class="demo-form-inline">
  5.       <el-form-item label="书籍名称 : ">
  6.         <el-input v-model="bookname" placeholder="书籍名称"></el-input>
  7.       </el-form-item>
  8.       <el-form-item>
  9.         <el-button type="primary" plain @click="onSubmit">查询</el-button>
  10.         <el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
  11.       </el-form-item>
  12.     </el-form>
  13.     <!-- 书籍的书籍表格 -->
  14.     <el-table :data="tableData" style="width: 100%">
  15.       <el-table-column prop="id" label="书籍ID"></el-table-column>
  16.       <el-table-column prop="bookname" label="书籍名称"></el-table-column>
  17.       <el-table-column prop="price" label="书籍价格"></el-table-column>
  18.       <el-table-column prop="booktype" label="书籍类型"></el-table-column>
  19.       <el-table-column label="操作" min-width="180">
  20.         <template slot-scope="scope">
  21.           <el-button size="mini" icon="el-icon-edit-outline" type="primary"
  22.                      @click="handleEdit(scope.$index, scope.row)">编 辑
  23.           </el-button>
  24.           <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删
  25.             除
  26.           </el-button>
  27.         </template>
  28.       </el-table-column>
  29.     </el-table>
  30.     <!-- 分页 -->
  31.     <div class="block" style="padding: 20px;">
  32.       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
  33.                      background :page-sizes="[10, 20, 30, 40]" :page-size="rows"
  34.                      layout="total, sizes, prev, pager, next, jumper"
  35.                      :total="total">
  36.       </el-pagination>
  37.     </div>
  38.     <!--    弹窗-->
  39.     <el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear">
  40.       <el-form :model="book" :rules="rules" ref="book">
  41.         <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
  42.           <el-input v-model="book.bookname" autocomplete="off"></el-input>
  43.         </el-form-item>
  44.         <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
  45.           <el-input v-model="book.price" autocomplete="off"></el-input>
  46.         </el-form-item>
  48.         <el-form-item label="书籍类型" :label-width="formLabelWidth" prop="booktype">
  49.           <el-select v-model="book.booktype" placeholder="请选择活动区域">
  50.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
  51.           </el-select>
  52.         </el-form-item>
  53.       </el-form>
  54.       <div slot="footer" class="dialog-footer">
  55.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  56.         <el-button type="primary" @click="editSubmit">确 定</el-button>
  57.       </div>
  58.     </el-dialog>
  59.   </div>
  61. </template>
  63. <script>
  64. export default {
  65.   data() {
  66.     return {
  67.       bookname: '',
  68.       tableData: [],
  69.       rows: 10,
  70.       total: 0,
  71.       page: 1,
  72.       // 是否打开弹窗
  73.       dialogFormVisible: false,
  74.       // 弹窗标题
  75.       title: '新增页面',
  76.       // 定义数组接收数据
  77.       book:
  78.         {id: '', bookname: '', price: '', booktype: ''}
  79.       ,
  80.       // 类型
  81.       types: [],
  82.       // 输入框长度
  83.       formLabelWidth: '100px',
  84.       //表单验证
  85.       rules: {
  86.         //定义验证格式
  87.         bookname: [
  88.           {required: true, message: '请输入书籍名称', trigger: 'blur'},
  89.           {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
  90.         ],
  91.         price: [
  92.           {required: true, message: '请输入书籍价格', trigger: 'change'},
  93.           {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
  94.         ],
  95.         booktype: [
  96.           {required: true, message: '请输入书籍类型', trigger: 'blur'}
  97.         ]
  98.       },
  100.     }
  101.   },
  102.   methods: {
  103.     // 初始化方法
  104.     clear() {
  105.       this.dialogFormVisible = false;
  106.       this.title = '新增页面';
  107.       this.book = {
  108.         id: '',
  109.         bookname: '',
  110.         price: '',
  111.         booktype: ''
  112.       }
  113.     },
  114.     // 编辑
  115.     handleEdit(index, row) {
  116.       this.dialogFormVisible = true;
  118.       if (row) {
  119.         this.title = '编辑页面';
  120.         this.book.id = row.id;
  121.         this.book.bookname = row.bookname;
  122.         this.book.price = row.price;
  123.         this.book.booktype = row.booktype;
  124.       }
  126.     },
  127.     // 删除
  128.     handleDelete(index, row) {
  129.       console.log(index, row)
  130.       let url = this.axios.urls.BOOK_DEL;
  131.       this.axios.post(url, {id: row.id}).then(d => {
  132.         this.query({})
  133.         this.$message({
  134.           message: '恭喜你，删除成功',
  135.           type: 'success'
  136.         });
  137.       }).catch(e => {
  138.         this.$message('已取消');
  139.       });
  140.     },
  141.     // 增加修改提交
  142.     editSubmit() {
  144.       //表单验证
  145.       this.$refs['book'].validate((valid) => {
  146.         if (valid) {
  147.           //验证通过执行增加修改方法
  149.           let params = {
  150.             id: this.book.id,
  151.             bookname: this.book.bookname,
  152.             price: this.book.price,
  153.             booktype: this.book.booktype
  154.           }
  156.           //获取后台请求书籍数据的地址
  157.           let url = this.axios.urls.BOOK_ADD;
  159.           if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
  160.             url = this.axios.urls.BOOK_EDIT;
  161.           }
  162.           this.axios.post(url, params).then(r => {
  163.             this.clear();//关闭窗口
  164.             this.query({});//刷新
  165.           }).catch(e => {
  167.           });
  168.         } else {
  169.           // console.log('error submit!!');
  170.           return false;
  171.         }
  172.       });
  175.     },
  176.     handleSizeChange(r) {
  177.       //当页大小发生变化
  178.       let params = {
  179.         bookname: this.bookname,
  180.         rows: r,
  181.         page: this.page
  182.       }
  183.       this.query(params);
  184.     },
  185.     handleCurrentChange(p) {
  186.       //当前页码大小发生变化
  187.       let params = {
  188.         bookname: this.bookname,
  189.         rows: this.rows,
  190.         // 分页
  191.         page: p
  192.       }
  193.       // console.log(params)
  194.       this.query(params);
  195.     },
  196.     query(params) {
  197.       //获取后台请求书籍数据的地址
  198.       let url = this.axios.urls.BOOK_BOOKLIST;
  199.       this.axios.get(url, {
  200.         params: params
  201.       }).then(d => {
  202.         this.tableData = d.data.rows;
  203.         this.total = d.data.total;
  204.       }).catch(e => {
  206.       });
  208.     },
  209.     onSubmit() {
  210.       let params = {
  211.         bookname: this.bookname
  212.       }
  213.       console.log(params)
  214.       this.query(params);
  215.       this.bookname = ''
  216.     }
  217.   },
  218.   created() {
  219.     this.types = [{id: 1, name: '玄幻'},
  220.       {id: 2, name: '计算机'},
  221.       {id: 3, name: '散文'},
  222.       {id: 4, name: '古典'},
  223.       {id: 5, name: '文学'},
  224.       {id: 6, name: '教育'},
  225.       {id: 7, name: '悬疑'},]
  226.     this.query({})
  227.   }
  228. }
  229. </script>
  231. <style>
  232. </style>

发表评论

表情：
评论列表 （有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读