前言：
本文主要为vue-element-admin框架的入门教程，本人2年后端开发经验，想自学前端转全栈工程师（听着就好酷），直接上手实战应该是入门前端最快的方式了，在此记录下学习过程，希望可以对初学者有所帮助。如有错误或未考虑完全的地方，望不吝赐教。
环境（配置）：win11操作系统，vs code编辑器
内容大纲：表单（新增员工），搜索下拉框实现，布局美化
具体步骤
上一期基本完成了员工列表的功能（后面再做页面美化），我们继续来看员工添加模块
打开对应的页面文件，用之前配置的插件，生成一个vue模板
分析需求
员工添加页面，先搜索微信名称，拿到需添加用户uid，然后填写对应的员工姓名、手机号、部门、职位、权限等级字段，提交表单，创建成功 （可以根据自己的后端接口修改字段及步骤）
组件库
element-UI组件库中，我们就使用这个带验证的组件吧
先把模板放进我们自己的页面，然后创建用到的变量，以及对多余字段进行删除
每一种类型的在这个组件中都有涉及，留下我们需要的几种即可
搜索下拉框
需求里面还提到需要一个输入微信昵称搜索用户的功能，组件库里可以找到 Select 选择器
这个组件相关的参数和事件比较多，可以仔细看一下，我们会用到这个
这里解释一下代码，如图
点击保存查看页面
搜索用户功能
接下来实现上述功能，api中加入搜索微信用户的接口
页面方法上写上，刚刚图中提到的自定义搜索事件
在输入框内容变化时候会触发该事件，并且把绑定的值nicname进行修改
在选择搜索出来的下拉列表后，搜索框内显示被选中的nickname字段，
并且nickname发生变化会触发getUid（）函数
也就是把选中记录的uid赋值给表单需要的字段里，搜索用户就完成了
这部分不太明白的话，可以参考一下element-UI组件库文档，每个组件的末尾页面都有参数及事件的介绍
表单提交
后端接口所需要接口就是接受定义 参数，数据库中创建一条记录并返回成功信息
同样先在api文件夹下新增该接口
表单组件已经提供了点击提交后触发的事件submitForm，进行参数校验通过后的代码块中加入我们的后端请求，并返回成功/失败信息
参数校验
参数校验这里就部一一演示了，比如手机号需要11位，也可以使用正则表达式，详情可以参考文档
到这里功能能就已经完成了！
布局优化
当前的页面比较随意，做一些简单的美化
