免费招聘网站有哪些,微信公众号流程图,重庆建设工程标准网,微商商城系统开发背景
对于后台管理系统#xff0c;数据的展示形式大多都是通过表格#xff0c;常常会出现的一种场景#xff0c;从表格跳到二级页面#xff0c;再返回上一页时#xff0c;需要缓存当前的页码和滚动条的位置#xff0c;以为使用keep-alive就能实现这两种诉求#xff0c;…背景
对于后台管理系统数据的展示形式大多都是通过表格常常会出现的一种场景从表格跳到二级页面再返回上一页时需要缓存当前的页码和滚动条的位置以为使用keep-alive就能实现这两种诉求实际开发的时候才发现 keep-alive组件是不会缓存滚动位置的。 实现table缓存滚动条
先使用keep-alive
templateel-mainrouter-view v-slot{ Component, route }transition appear namefade-transform modeout-inkeep-alive :includekeepAliveStore.keepAliveNamecomponent :isComponent :keyroute.path v-ifisRouterShow //keep-alive/transition/router-view/el-main
/template
在二次封装的列表组件中监听 activated 和 deactivated 生命周期设置表格的滚动条
// 实现element table缓存滚动位置
const tableRef refInstanceTypetypeof ElTable(); // 表格的实例
const scrollPosition refnumber | null(null); // 记录滚动条的位置
// 页面激活时
onActivated(() {if (scrollPosition.value) {nextTick(() {// 设置表格的滚动条位置tableRef.value?.scrollBarRef.setScrollTop(scrollPosition.value);scrollPosition.value null;});}
});
// 页面离开时
onDeactivated(() {nextTick(() {// 记录滚动条的位置scrollPosition.value tableRef.value?.scrollBarRef.wrapRef.scrollTop;});
});
呈现的效果 END
