Vue3 element-plus table 换页滚动条的问题,请教

Question

element-plus table 表格,切换下一页,滚动条不会置顶,

<el-table   ref='table'>.....</el-table>
    <el-footer>
        <el-pagination background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:current-page="currentPage"
          :total="totalCount"
          :page-size="pageSize"
          :page-sizes="[22, 30, 50, 100]"
          :page-count="pageCount"
          layout="total,sizes,prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
    </el-footer>
<scripct>
export default {
methods: {
   handleCurrentChange (val) {
      this.currentPage = val
      this.$nextTick(() => {
        console.log('##############', this.$refs.table.scrollTop)
        this.$refs.table.scrollTop = 0
      })
    }
  }
}
</script>

上面打印出来是undefined.请指点

Answer 1

哈喽，vue3的ref获取标签方式变了哦，在setup中定义ref，变量名为html绑定的名字。

import { ref } from "vue";
export default {
    name: "ref",
    setup(){
        const table = ref(null) //这里的table就是你的表格标签哦
        // 在这里定义置顶方法
        const handleCurrentChange = (val)=>{
            table.value.$refs.bodyWrapper.scrollTop=0;
        }
        retuen {
            table，
            handleCurrentChange
        }
    }
};