手把手前端入门笔记之vue-element-admin-04

前言：

本文主要为vue-element-admin框架的入门教程，本人2年后端开发经验，想自学前端转全栈工程师（听着就好酷），直接上手实战应该是入门前端最快的方式了，在此记录下学习过程，希望可以对初学者有所帮助。如有错误或未考虑完全的地方，望不吝赐教。

第一期 手把手前端入门笔记之vue-element-admin-01

第二期 手把手前端入门笔记之vue-element-admin-02

第三期 手把手前端入门笔记之vue-element-admin-03

第四期 手把手前端入门笔记之vue-element-admin-04

环境（配置）：win11操作系统，vs code编辑器

内容大纲：表单（新增员工），搜索下拉框实现，布局美化

具体步骤

上一期基本完成了员工列表的功能（后面再做页面美化），我们继续来看员工添加模块

​

打开对应的页面文件，用之前配置的插件，生成一个vue模板

分析需求

员工添加页面，先搜索微信名称，拿到需添加用户uid，然后填写对应的员工姓名、手机号、部门、职位、权限等级字段，提交表单，创建成功 （可以根据自己的后端接口修改字段及步骤）

组件库

element-UI组件库中，我们就使用这个带验证的组件吧

先把模板放进我们自己的页面，然后创建用到的变量，以及对多余字段进行删除

每一种类型的在这个组件中都有涉及，留下我们需要的几种即可

搜索下拉框

需求里面还提到需要一个输入微信昵称搜索用户的功能，组件库里可以找到 Select 选择器

这个组件相关的参数和事件比较多，可以仔细看一下，我们会用到这个

这里解释一下代码，如图

点击保存查看页面

搜索用户功能

接下来实现上述功能，api中加入搜索微信用户的接口

页面方法上写上，刚刚图中提到的自定义搜索事件

在输入框内容变化时候会触发该事件，并且把绑定的值nicname进行修改

在选择搜索出来的下拉列表后，搜索框内显示被选中的nickname字段，

并且nickname发生变化会触发getUid（）函数

也就是把选中记录的uid赋值给表单需要的字段里，搜索用户就完成了

这部分不太明白的话，可以参考一下element-UI组件库文档，每个组件的末尾页面都有参数及事件的介绍

表单提交

后端接口所需要接口就是接受定义 参数，数据库中创建一条记录并返回成功信息

同样先在api文件夹下新增该接口

表单组件已经提供了点击提交后触发的事件submitForm，进行参数校验通过后的代码块中加入我们的后端请求，并返回成功/失败信息

参数校验

参数校验这里就部一一演示了，比如手机号需要11位，也可以使用正则表达式，详情可以参考文档

到这里功能能就已经完成了！

布局优化

当前的页面比较随意，做一些简单的美化