标签：el 26 2021.11 res 列表 滚动条 scrollTop table

开始记录我日常修bug遇到的一些小问题吧，希望能持之以恒，逐步积累。  

我遇到的情况：点击主列表当前行修改按钮后，跳转另一个组件界面保存后，再返回主列表界面。而当前主列表滚动条自动置顶，想实现返回到上一次离开界面滚动条的位置。(以下为查过各位大佬后的各种方法，最终整理出适合我的)

1、首先在el-table 绑定 ref

2、由于主列表数据是刚进界面就开始请求接口渲染【mounted：getTableData()】，我们必须要在请求完主列表数据后添加以下这段代码，才可获取当前表格内容的高度。直接看代码吧。

 data() {
    return {
      scrollTop: null, //定义新变量-当前表格高度
}
}

//mounted里调用
getTableData() {
      let _this = this
      let params = {
        "busicode": "dataList",
        "data": _this.tableQuery,
      }
      this.$api.fetch({
        params: params,//参数
      }).then(res => {
        _this.tableData = res;//接收主列表数据
       // console.log(this.$refs.table);//可自行打印是否获取到值
      //以下代码是核心(我先前一直把它放在mounted一直获取不到，必须要放对位置才行)
       this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => {
        let height = res.target
        this.scrollTop = height.scrollTop
      },false)
      })
    },

3、继续加上以下代码

   activated() {
      this.saveScroll()
    },
   beforeDestroy() {
      this.$refs.table.bodyWrapper.removeEventListener('scroll', (res) => {
        let height = res.target
        this.scrollTop = height.scrollTop
      },false)
    },
methods:{
    // 这里如果直接赋值给this.$el.querySelector('.el-table__body-wrapper').scrollTop会失效，需要加上setTimeout才行。 
    saveScroll() {
        this.$nextTick(()=> {
        setTimeout(() => {
          var scrollTop = this.$el.querySelector('.el-table__body-wrapper')
          scrollTop.scrollTop = this.scrollTop
          }, 13)
        })
      },
   //由于表格分页后，滚动条需返回到置顶位置-在分页的方法内
    handleCurrentChange(val) {  //显示多少页码
      this.tableQuery.page = val
      //若切换页码则滚动条重新回到顶部，加上以下代码
      this.scrollTop = 0  
      this.saveScroll()
      //获取主列表数据
      this.getTableData()
    },
   //由于本人项目是点击返回按钮,点击返回上次离开界面记录的滚动条位置
     backListData() {
      this.saveScroll() 
      this.getTableData();
    }

}

标签：el,26,2021.11,res,列表,滚动条,scrollTop,table
来源： https://blog.csdn.net/m0_46270721/article/details/121564068

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。