用户页面管理

1：Bug描述：当我点击一个的时候下一个角色的时候，弹窗中展示的还是上一次选中的角色。

思路：造成这个bug是因为父组件传过来的值（role）没有进行判断他是否进行了更改，这样就需要给这个checkedKeys和updatedKeys都要重新赋值，并且我的树形框架哪个勾选也要重新设置一下。

解决：那么怎么判断这个role是否进行了更改呢，用vue的监听器去监听这个role，只要这个role发生了变化就给mounted（）里面的值重新进行设置，然后重新勾选就需要找到我们的这个树形框架（就给这个树形框架用ref起个名字  ref:tree）,然后在watcher里面通过 this.$refs['tree'].setCheckedKeys(this.checkedKeys)把这个数组  通过看elementui我知道控件setCheckedKeys的属性可以接收两个参数，第二个参数是boolean，默认是false。所以当我在次打开就不是勾选的了。

2：把时间搓显示成真正的时间：去elementui里面找找有没有格式化的方法找到了formatter属性

写一个函数（resetDate） 在Role组件的创建时间和授权时间里面都加上，在最下面去定义这个函数。

因为在elementui里面看见能接受哪几个参数，然后在之前写过一个格式化时间的文件，只要调用里面的方法就可以了【需要在组件中引用一下】，就可以把时间进行格式化。

但是我出现了一个bug：

问题原因：这是因为我在创建角色表库的时候，把auth_time没定义类型，默认是string类型的，所以我在调用这个格式化方法的时候，不能转变。只要在数据库中定义一下就好了。

到这为止：角色权限这就结束了-到用户管理了

老套路：前台搭建一个页面，然后再写后台接口，前台也写一个，然后再来一个api调用这个方法然后在回到组件中去发送请求，然后对显示数据的对象进行赋值

3：还是一样的步骤，elementui里面找到框架，粘贴修改，然后记得也要格式化一下时间。这样基础页面就搭建好了

分页功能的实现：在element-ui里面找到完整功能的然后进行修改 :page-sizes="[5, 10, 15, 20]"

显示的是一页显示几条，total：总共的条数，还有pageSize都需要在data中定义一下。

4：接下来就要把user里的数据变成真正的数据了-----进入后台

在后台写出获取用户的方法，还有获取分页用户的方法但是在分页中也要把角色列表也返回去。（因为用户里面包括角色，要不然获取用户列表之后还要获取一下角色列表）

删除user里面的数据，然后写api方法，然后定义fetchUserL方法去调用getUserList路由方法，如果成功user就能获取到resp从后台获取的数据。同时要有users和roleOptions存放用户和角色

5：按钮弹窗实现

然后接下来就是点击添加用户有弹窗显示：在element-ui里面找到对话框组件然后修改，在data里面定义添加或者编辑对象的属性，还有弹窗，还有users用户信息，还有储存角色的变量，再在打开用户弹窗那里设置为true，然后利用refs表单的名字把获取到，用表单的resetFieds属性进行重置表单。

6：再写表单校验

利用element-ui的自定义表达校验。

用户名需求要小写英文字母，大写英文字母，数字0-9或者下划线组成的并且长度要大于四位

手机号也要进行自定义校验-利用正则

校验规则写在data里面return上面。

然后利用正则表达式/^[a-zA-Z0-9_]+$/  以什么开头以什么结尾 ，在data中定义自定义表单内容，然后在return里面写出标准校验的的内容。弹窗的表单校验到这就结束了。