在对应组件下利用：model进行绑定，绑定后需要在export default中通过data设置绑定哪些数据对象，然后在对应表单进行相应数据对象绑定。
和model一样，我们需要利用rules制定相应的验证规则。同时也是需要在export fault写具体的验证规则对象。而每个item想中有个属性prop就意味着这个item项服从哪个验证规则。
利用ref属性可以为想要获取的表单实例对象命名，后续想要对该表单实例对象作相应操作就可以利用该ref命名的名字实现对该表单整体做操作。
如果返回对象是promise，则可以利用await async来简化返回的数据对象。而await只能用于被async修饰的方法中。所以要把await修饰的方法改为async修饰的异步方法，箭头函数前面也要加上async。
里面validate是element中表单验证方法。valid为返回表单验证返回值，true或者false。
通过ref获取data中的status就可知道是否登录成功。
token就是在用户访问服务器后会生成的，后续操作都需要根据token验证用户身份。
在浏览器appllication中可查看sessionStorage。
每次添加组件先在components中写好大纲，然后要去route下导入该组件以及配置相应的路由规则。同理，当调用某个element组件模块时，要去plugins导入相应模块并挂载到Vue上。
即在未登录情况不可查看有权限比如登录才可看到的页面。
1、利用git status查看当前项目中源代码状态
2、git add .将所有修改的文件提交到暂存区
3、git status再次检查状态，都为绿色则说明已经被添加到暂存区
4、git commit -m "完成了登录功能" 将所有代码提交到本地仓库中
5、git branch查看当前分支，git checkout master切换分支到master
6、git merge login 将login分支内容合并到当前分支master中
7、git push 进行远程推送，将本地master中的分支代码推送到云端的master中
8、新建分支：git checkout login 切换到要新建的分支上，git push -u origin login 将本地login分支推送到云端origin中，同时命名为login
request为请求拦截器，利用use函数为请求拦截器挂载一个回调函数。服务器端通过axios发了数据请求，必然发送请求期间会优先调用use这个回调函数。因此请求在到达服务器之前会调用该回调函数对这个请求做一个预处理。请求预处理后发送到服务器做最后处理。
因此请求拦截器相当于一个预处理过：为请求头对象挂载一个自定义属性，值为保存在sessionStorage中的token值。
1、 根据上图我们可以知道获取该数据路径是menus，请求方法是get。而对于数据，它只有一个children，所以最高是二级菜单。
2、在整个页面刚一加载就应该立即获取左侧菜单栏，所以我们要在对应组件的行为处的定义生命周期函数，然后在生命函数内调用this.getMenuList()方法获取菜单栏数据。
3、在methods中定义上述提到的getMenuList方法，在该方法中我们要利用this.$http.get('menus')获取数据。又因为该方法返回的是promise数据类型，所以我们利用await async对数据简化，获取data数据。
4、为了让获取到的数据挂载到页面中去，我们需要去data中rerurn一个数据对象menulist[]，然后将该数据保存到这个数据对象中。
5、在保存到该数据对象中的时候我们需要先判断status状态，如果状态不等于200说明获取失败，然后打印错误消息。反之则将该数据保存到menlist[]中。
1、利用v-for在对应渲染的数据处进行循环获取数组中的数据，同时要对key指定对应Id值。
2、在要存放该数据的地方根据item.去获取相应的名称。
3、为了防止每个菜单部分行为都一样，我们需要对每个菜单指定唯一的Index，这个index就可以根据key的id进行指定。（index只接受字符串，id为数字，可以id+' '使得变为字符串类型）动态绑定不要忘记加：
4、对于二级菜单，类比一级菜单在需要的地方循环item.children数组。然后在获取相应的值。
5、想要每个菜单项前面的icon都不一样可以自定义一个icon对象，根据item.id对应每一个icon。然后在需要使用icon的地方根据item的id获取即可。
1、在element组件中对于侧边栏有个collapse参数，当为true则会回收，false则展开。
2、在data中定义isCollapse为一个Bool值，默认为false。然后将该值动态绑定到侧边栏el-menu上。
3、对回收按钮绑定点击事件，当触发点击按钮时，给isCollapse取反即可。
4、collapse-transition可使得展开期间没有折叠动画
5、解决背景随着折叠变宽变细。将侧边栏的长度根据isCollapse是否为true来决定它的宽度。
6、利用三元表达式直接动态绑定width的值，当isCollapse为true则宽度为多少，当isCollapse为false时宽度为多少。
1、在element组件中有一个router属性，启用router可以以index作为路径激活路由模式。
2、开启路由：为el-menu设置:router="true"。
3、在data数据中有一个path属性，将子菜单的index设置为当前这一项的path属性。值得注意的是这个path并没有加属性，所以我们得自己加'/'。
1、default-active=“对应路径”实现点击时高亮。
2、该路径的获取可以通过上述的index值获取，为了获取该index的值并保存到一个数据中需要定义方法和一个数据。
3、当点击某侧边栏菜单项时就触发该方法然后将它的index值赋予对应的数据保存。
4、对于数据的保存保存到sessionStorage中，之后从sessionStorage中获取就可。
5、因为sessionStorage是在生命周期create就可获取的，所以在这里就可以赋值。
1、基于上述的path路径，新建一个组件，然后配置组件路径。注意组件的路径名称与path路径要一致。
2、从数据库中获取数据与第12个发起请求数据类似，此次我们要请求的是用户数据UserList。
3、获取用户数据并存入userlist中后，利用el-table进行渲染数据。也就是在el-table动态:data=userlist，然后在子组件el-table-column利用prop进行父组件向子组件传值。这里要注意prop 值就是userlist中的prop，然后会对应渲染。
1、通过作用域插槽接收scope，通过scope.row就可以获取这一行对应的数据。
2、在element组件中有el-switch组件，组件中的v-model绑定scope.row.mg_state。
1、通过作用域插槽进行渲染
2、与上述一样slot-scope="scope"，再通过scope.row获取这一行对应的数据。（为什么要用插槽因为操作栏的渲染需要id等信息，就需要获取这一行的数据）
3、在element中寻找对应按钮组件然后放到代码对应处。
4、按钮的属性我们可以在组件下方寻找它对应参数，从而改变按钮样式。
5、按钮一行放不下，可以修改父元素的width。
6、想要鼠标放在按钮显示文本，Tooltip文字提示组件。
1、在element组件中有页码对应组件，先找到对应组件然后放到对应代码处。
2、注意组价代码中的绑定事件：监听pagesize改变以及监听页码值改变 事件。要对这些事件进行定义与处理。handleSizeChange事件要先将监听到的页码大小值复制给data中querInfo的pagenum，然后再调用getUserlist获取当前的用户列表。handleCurrentChange事件监听到当前改变的页码，然后将该值赋值给pagesize，再调用getuserlist去获取当前用户列表。
3、当前时间绑定属性绑定了当前的页码值，在data数据中用户列表里含有当前页码以及每页显示多少数据的数据，我们可以将该属性与用户列表里的数据进行动态绑定。
主要思想：将更改的状态同步保存到后台数据库中。
1、监听switch开关状态的转变，拿到当前状态
2、调用API接口，将拿到的状态保存到我的数据库中。
3、element中switch开关有个事件名称叫change，是switch状态变化的回调函数，可拿到最新的状态值。因此在对应状态元素定义@change事件。
4、在methods中定义change事件函数，获取状态改变信息
5、根据上述API文档保存数据。在方法中this.$http.put('请求路径')，（为了拼接一些参数可以将''修改为模板字符串``）然后与之前一样对该返回数据利用await async进行简化。之后对返回状态进行判断，返回状态正确就将获取的数据保存 ，返回失败要对进行操作进行恢复，将修改的数据状态变为之前的。
根据名称搜索。
1、将文本框和data中的数据做双向绑定。
2、绑定后当点击按钮时调用获取用户列表的函数，进行数据的查询。
1、element组件中有一个dialog组件，先找到该组件然后放在对应位置。
2、对该组件进行改造：:visible.sync="dialogVisible"表明动态绑定一个数据，所以要在data中进行定义，且为Boolean类型。
3、在对话框中再添加对应表单组件，然后对表单组件进行改造。
4、首先对于动态绑定的model数据我们要在data中定义该数据对象，rules定义表单规则对象，ref获取表单实例对象，prop是验证规则属性，通过prop可以指定该项服从哪个表单规则。
5、自定义规则：定义一个箭头函数定义具体的规则，然后在规则处validator来使用这个箭头函数的名称。
就是当添加用户填完信息后关闭再打开，上次的信息并没有被重置，而是依旧在页面中。
主要思想：监听对话框关闭事件，在关闭事件中重置该表单。
1、为添加用户这个对话框绑定close事件，当对话框关闭时触发该事件。 @close=''
2、在methods中定义该事件方法。通过this.$refs可以获取到ref引用，从而获取整个对话框实例。再例如登录页面的重置，调用resetFields方法进行重置。
1、为确定按钮添加点击事件，@click='添加用户事件。
2、在methods中写该事件方法。方法首先需要进行表单预校验：this.$refs.Ref属性.validate(valid=>{console.log('valid')})
3、根据valid的值可以判断校验是否成功，如果失败则返回，成功则向数据库中添加用户。
4、根据API文档，知道要通过post请求。当post请求后要隐藏用户对话框、重新查询用户数据列表进行展示。
1、对修改按钮绑定点击事件，当点击按钮出现用户修改框
2、添加修改用户对话框
3、对话框的显示是根据editDialogVisible的值决定是否显示，当点击按钮时使得editDialogVisible的值为true即可显示
4、利用scope插槽可以获取用户信息，利用它点出来id传给点击事件
5、在点击事件中利用Id获取用户信息，然后判断获取是否成功，成功就将获取的信息保存到一个数据对象中。
6、在对话框的主体内容中放置表单内容，然后进行对应改造。v-model就是上述保存的数据对象，还有校验规则，以及引用对象需要改造。
7、对于每一个input的表单数据绑定，比如username我们要对应于API文档中的名字，否则会调用失败。
8、定义表单校验规则，规则名为prop的名字，每一个prop对应于它要遵守的表单规则。
9、为对话框添加关闭事件，每当关闭窗口，利用表单的Ref引用重置整个表单即可。
10、当在对话框中点击确定按钮时，进行表单预验证。一样利用ref引用.validate进行预验证，如果验证成功则保持到数据库中。
因篇幅问题不能全部显示，请点此查看更多更全内容