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里面写出标准校验的的内容。弹窗的表单校验到这就结束了。