关于el-table表格跳转详情页修改数据后返回，改变表格内容，保存当前页码的功能

爱分享的Hayes小朋友

已于 2024-08-16 10:05:37 修改

阅读量384

点赞数 5

文章标签：前端 javascript element-plus vue3

于 2024-08-06 12:37:20 首次发布

本文链接：https://blog.csdn.net/x_XDGS/article/details/140951936

版权

关于el-table表格跳转详情页修改数据后返回，改变表格内容，保存当前页码的功能

在工作中，总能遇到一些需求是某个api或者组件无法解决的，这时候就要想其他办法了。

就比如说：前一段时间遇到的，横向滚动条只滚动鼠标滚轮就能够左右滚动的问题。在这随便插一嘴，我不想写这个博客，因为这不是技术问题，是你思维问题，就看你能不能想到。
大概做法就是：如果是文字内容，就将每一行的宽度设置成只能放一个字，然后将文字顺时针旋转90°，然后就肯定会出现竖向滚动条，然后再将整块区域逆时针旋转90°，最后进行将整块区域下降一定的高度进行调整就行了。

在这呢，又遇到了一个需求，表格进入详情页修改了数据之后，返回后也要更新表格数据，但是分页还是要在这个页码上

看到这个需求：分页还是在当前的页码，首先肯定是想到用keep-alive，但是keep-alive是怎么做的，顺便复习一下吧
首先，在默认状态下，组件实例被替换后就会被销毁。而被keep-alive包裹的的组件实例会被缓存下来，可以通过include和exclude，根据组件name进行定制（可通过vite-plugin-vue-setup-extend插件在vue3中直接定义组件name）。如果需要改变组件重新激活，可以使用onActivated() 和 onDeactivated()两个声明周期钩子。

keep-alive很显然不适合

我们使用浏览器自带的缓存localStorage来实现当前的需求
首先，我们在调用接口的时候将页码缓存起来

const onSubmit = (val) => {
  mySetStorage('singlePage', val)   // 这个是我自己封装的localStorage，意义就在于不需要每次使用都要JSON.stringify()
  queryTableList(val);
};

然后，当我们返回页面的时候，获取缓存的页码，handleCurrentChange是分页组件的改变页码的方法，在这里面必须用这个方法，不然不好使，而且获取的页面也要转为数字格式，字符串格式也不好使。

onBeforeMount(() => {
  pageNum.value = myGetStorage('singlePage')
  if (pageNum.value && pageNum.value != 1) {
    handleCurrentChange(Number(pageNum.value))
  } else {
    onSubmit(1);
  }
});

<el-pagination background @current-change="handleCurrentChange" :total="total" v-model:current-page="pageNum"
        v-model:page-size="pageSize" layout=" prev, pager, next" />

最后，我们要在适当的地方清除这个页码，比如：当点击侧边栏更换路由的时候，退出系统的时候，或者我直接没退出，关闭了浏览器，下一次我直接重新登录的时候（写到这，我突然感觉是不是sessionStroage更好一点呢？伙伴们可以自己试试）
注意： 页面卸载时千万不要清空这个缓存，因为我们在点击进入详情页面时，页面也就是卸载了。