vue-element-admin 增删改查（五）

此篇幅比较长，涉及到的小知识点也比较多，一定要耐心看完，记住学东西没有耐心可不行！！！

一、添加和修改

注：添加和编辑用到了同一个组件，也就是此篇文章你能学会如何封装组件及引用组件；第二能学会async和await；第三父向子传递数据props和子向父传递数据$emit()；

1.添加数据

（1）请求地址：/article/category利用post传递数据

（2）编写api：注意add的url地址用的反单引号，可以在url后面进行组合数据，这个知识点在编辑和删除你会看到详细的解释。

（3）编写方法

首先新建一个组件，里面的代码同样是从elementUI中复制过来的表单，下面会根据详细步骤解析elementUI标签中属性的意思。

在category/index.vue中进行引用，注意组件要首字母大写，不是必须的，但是最好规范一些。

引用完毕之后进行修改edit.vue组件：解析：:title动态绑定的title名称；:visible.sync布尔类型，控制模态框的显示与否；:before-close是一个方法，关闭模态框；:rules表单验证；ref=相当于id=；:model表单的数据；prop=关闭模态框时清除数据要用到，这个在elementUI中有解释，自己去看文档；v-model绑定的具体数值；:label绑定的数据，要做默认选中效果；@click执行的方法

由于是父组件向子组件传递数据，所以在子组件中要用props进行接收，然后在上面进行动态绑定；注意：所有接受的变量要定义type和default，声明类型和默认值；此处小知识点，子组件向父组件传递值用$emit();

表单验证：在子组件中返回rules，也就是开头:rules="rules"；注意：这里的rules是个object，里面需要验证的字段是个array，数组中每个value都是object，详细的验证方法在elementUI中有体现，自己去看。

此处定义的handleClose、onSubmit、submit方法；注意：在submit中有编辑和添加方法，用的同一个，所以有if判断；this.$refs['form'].resetFields()相当于jquey中$('#form').resetFields()清空数据；async、await和promise区别，自己去百度，这里只说明async和await是es6新语法，相当于api.add(this.formData).then((res) => {//TODO})；这里可能有同学会有疑问，this.closeForm()这个方法在哪？他是父组件传递过来的Funciton，在下文中会解释到。

开始操作父组件index.vue，在data中返回edit对象，然后把里面的值绑定到<edit />组件标签中；解析：title就是title；visible是否显示模态框；formData传递过去的数据，由于是添加功能，所以formData是空的，编辑就需要传递了；closeForm传递一个方法，用来关闭模态框

到这里，添加功能就已经实现了，仔细去看我上面的截图，一定要注意我说的点，如果你比着写发现不对，一定要仔细对比。当对比不出来的时候，留言告诉我。

2.修改数据

（1）请求地址：/article/category/{id} 查询数据用get，这里的请求类型用的是restful请求方式，restful包含：get、post、put、patch、delete；/article/category 修改数据用put

（2）编写api：由于修改需要先查到数据，然后再进行传递和渲染，所以在api中有一个查询数据方法，也就是getById()

（3）编写方法

在index.vue父组件中编辑方法为handleEdit()，同样这里用到了async和await，然后先请求到了当前id返回的值，然后传递到edit.vue子组件中。

这里的if判断，判断传递过来的formData的id值是否为空，有值说明是编辑，无值说明是添加。if判断就在这里进行的体现价值，因为我们添加和编辑用的同一个组件，所以if显得至关重要。

仔细去看代码，去理解我的思路，为什么某些地方是这样写而不是那样写，一定要注意。哪里有看不明白的一定要留言进行讨论，我看到会第一时间回复。最终的效果：

二、删除

（1）请求地址：/article/category/{id} 删除用的是delete请求类型

（2）编写api：在强调一遍，url用的反单引号

（3）编写方法：因为删除用不到子组件了，所以删除都在index.vue中进行的

这里用到了elementUI中的$confirm方法，去文档中复制使用即可，方法的话就不再详细解释了，前面几篇文章已经解释过了。api.delete(id).then((res) => {//TODO})

最终效果：点击删除，显示提示，传递id进行删除。

vue-element-admin 增删改查（五）相关推荐

Vue学习（增删改查、ES6模块化概念）-学习笔记
文章目录 Vue学习(增删改查.ES6模块化概念)-学习笔记增删改查案例 ES6模块化概念 Vue学习(增删改查.ES6模块化概念)-学习笔记增删改查案例 <!DOCTYPE html> ...
Flask+VUE 实现页面增删改查显示开发+测试（图文教程附源码）
目录一.新建项目并初始化二.安装依赖 axios.elementUI 三.Vue代码四.进行接口联调五.后端接口优化六.web页面功能测试七.总结八.展望九.附录(截止发文时的代码) ...
vue结合php增删改查实例,从vue基础开始创建一个简单的增删改查的实例
1.安装vue-clicnpm install vue-cli -g --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目 ...
vue结合php增删改查实例,用vue.js写一个简单的增删改查
Title tbody:empty:after { content: '没有找到'; } 姓名年龄操作 {{item.stuName}}{{item.age}}修改删除添加 var app = n ...
Vue+SpringBoot搭建增删改查小demo
后端实现(SpringBoot) 1.新建一个springboot项目,添加依赖如下: <dependency><groupId>org.springframework.boo ...
vue纯前端增删改查分页
话不多说上代码 <template><div><div style="margin-left:200px;"><el-input plac ...
创建vue+iview项目实现分页增删改查功能
iview+vue实现分页增删改查功能一. 后台代码二.前端工具是webstorm,直接上测试相应js接口三.相应的页面四.效果展示上一片文章总结了下如何创建一个vue项目,前端框架使用iv ...
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查)
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查) 前言完整代码三连后私信我获取~ 撸了一上午完成的SPA商品管理系统,求三连! B站演 ...
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
通过Element开发基础增删改查页面——Vue项目实战(三)
一.Tab标签页设置 tab标签引入 <div><el-tabs v-model="activeName" type="card">&l ...

vue-element-admin 增删改查（五）

vue-element-admin 增删改查（五）相关推荐

最新文章

热门文章