vue实际项目应用遇到的watch应用、elementUI分页赋值高亮的问题及解决方法

 

功能需求：根据查询条件获取数据。

1、查询条件“发送的条件”值发生变化时主动调用数据。使用watch检测“发送的条件”字段值变化实现动态获取数据。

2、点击上图列表中“查看”按钮前往详情页面再返回当前页面时，保留之前的所有查询条件。

 

问题：

1、页面加载初始化请求数据，watch监测到数据变化又触发接口一次请求（如果页面中多个使用watch检测的请求参数将请求多次）

2、配合使用elementUI的分页组件，当离开列表页为非初始的page页码时，再次返回页面赋值的page不能高亮。

 

解决方法：

1、在data中定义is_mounte:true，是否为页面加载初始化请求数据状态。初始化数据时调用接口完成后将is_mounte修改为false状态，watch检测变化时判断如果is_mounte不为真则请求接口，否则当前为初始化的调用接口，无需做多次请求。

2、将el-pagination分页组件的total在data初始值时设置一个较大的值（99999），再次返回列表页时可高亮上次离开时的页码，但此时会出现分页组件的数据闪变，我用的是在el-pagination上使用v-if做判断，当total小于99999时显示，也就是total赋值成功后再让分页组件显示。

转载于:https://www.cnblogs.com/zhaoxiaoying/p/10251627.html