记录el-table当前滚动条位置-我的修Bug日记（2021.11.26）

开始记录我日常修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