vue项目,点击跳转到下一个页面,返回的时候要定位到点击的位置功能实现

描述一下场景,我在A页面有一个很大的table表,数据是定死的,我点击其中一项跳转到B页面,B页面再点击返回(this.$router.back() ),滚动条要定位到table中点击的那一项

 以上为A页面

1.第一步,刚开始页面滚动条是整个页面的,即浏览器窗口,但是我始终监听不到浏览器的滚动条,所以我就给el-table加了高度,让el-table拥有自己的滚动条

<el-table
            ref="singleTable"
            :row-class-name="tableRowClassName"
            @row-click="clickRow"
            v-loading="dataListLoading"
            :border="true"
            :data="dataList"
            height="71vh"
          >
</el-table>
// 在这要注意的是,我加了 :row-class-name="tableRowClassName"
//                      @row-click="clickRow"
// 这两个事件,这两个事件主要是为了给每行加上属于自己的索引值,以便后续使用
//以下为js事件
 tableRowClassName({ row, rowIndex }) {
      // console.log(row);
      // console.log(rowIndex);
        row.index = rowIndex;
    },
 async clickRow(row) {
          if (row.index !== this.index) {
                // 如果点击的当前行的索引 不同的时候,进行一些操作,比如访问接口请求参数,如果一样                                
         // 的话,就不做请求,还是原来的数据。
              }
         //让点击的这行索引赋值给变量index
          this.index = row.index;
     },

2.在点击el-table中行数据的时候,获取当前行数据中的索引值,存入sessionStorage

// 表中被点击行
<el-table-column prop="patrolTask" label="xxxx">
              <template slot-scope="scope">
                <el-link type="primary" @click="linkTask(scope.row)">{{                                     scope.row.patrolTask }}</el-link>
              </template>
            </el-table-column>


// 单击xxxx
 linkTask(row) {
    sessionStorage.setItem('index',row.index)
 }

3.因为这张大表数据挺多,而且有很多合并行合并列,所以我对他进行了首次进入后的缓存操作,在路由处加了以下属性

 并且在App.vue入口文件加了keep-alive,用来缓存组件实例

 这一步可以理解为优化的操作
4.以上操作都做完以后,在activated钩子里面做以下操作,因为上面用了keep-alive,所以在进入页面时,只能用这个钩子函数初始化的时候进行操作滚动条,如果没有进行缓存实例操作的话,也可以在created钩子中去操作

 activated(){
    let index = sessionStorage.getItem('index')
    setTimeout(() => {
      const tableBodyWrapper = document.querySelector('.el-table__body-wrapper');
      tableBodyWrapper.scrollTop = index*60;
    },500)
  },

如有不足,欢迎各位大佬多多指教! 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值