一、关于vue+Element-ui项目分页刷新不停留在当前页码bug解决

使用 pagination组件进行分页时，

问题一：点击其他页码时刷新浏览器，页码默认跳转回到了第一页并没有停留在当前页码。

问题二：如果你并不是在第一页进行数据搜索分页，那么当你返回当前页，页面数据为离开时的数据，但页码显示为第一页，此时你再次点击刚才的页码，两页数据为一致，出现页码数据重复。

利用 localStorage或者 sessionStorage将跳转页面前的 currentPage存储起来，当再次返回当前页的时候，在 created生命周期里，获取到存储的 currentPage，再进行加载，从而保持页面的一致性。

加入 v-if="pagination.total!= 0是为了防止，取得总条数 total之前， element-ui的分页组件先行在页面加载完毕，导致 total初始化默认为0，当总条数为0的时候，分页组件的页码默认为1。并且当 total在 created生命周期里正确取到数据后，分页组件也不会刷新。所以这就导致，页面内容正确，但是页码高亮依旧是第一页。

二、Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开

在element-ui中采用NavMenu导航菜单作为系统菜单的实现。

官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean类型，用于控制是否水平折叠菜单。

我们可以通过设置collapse属性的值为 true或 false来控制菜单的折叠与展开。

解决方案

1.实现一个按钮，

2.在data中定义一个数据collapse

3.实现方法toggleCollapse

4.在el-menu中动态绑定属性值collapse

问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：

三、vue和element版本对应关系

vue和element版本对应关系，vue是一个渐进式框架，Element-Ui是组件库。Vue是一套用于构建用户界面的渐进式JavaScript框架，开发者只需要关注视图层，它不仅易于上手，还便于与第三方库或既有项目的整合，是基于MVVM，Model-View-ViewModel，即视图层-视图模型层-模型层设计思想，提供MVVM数据双向绑定的库，专注于UI层面，element是基于vue实现的一套不依赖业务的UI组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度，Element-Ui是基于vue封装的组件库，简化了常用组件的封装，提高了重用性原则，vue是一个渐进式框架，Element-Ui是组件库。

四、vue element ui 怎么点击按钮隐藏让另外一个按钮显示

1、新建一个html页面，然后在这个代码页面上创建一个div标签id为app，然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。

2、引入vue.js。在body结束标签前面使用<sctipt>引入vue.js文件。

3、为vue创建挂载点。在vue.js引入文件后面新建一个<sctipt>标签，然后创建vue的挂载点。

4、使用data创建show属性，默认值为true；使用metheds创建一个点击**（showCont），该**处理当show值为true就修改给false，当show为false就修改为true。

5、添加显示隐藏功能。在按钮标签上添加点击**showCont，在按钮标签后的div标签上使用v-if添加show属性。

6、保存html代码，然后使用浏览器打开，点击按钮会发现按钮后面的文字隐藏了，再次点击按钮隐藏的内容又显示出来。