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

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.请指点

哈喽,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
        }
    }
};

console.log('##############', this.$refs.table.bodyWrapper.scrollTop) 改了也没用,还是一样提示
Uncaught (in promise) TypeError: _this8.$refs.table.bodyWrapper is undefined

Vue3中ref不是这么用的呀。例如我们定义了一个el-table的ref名字是my_ref

   //再data中或者setup()中需要做下面的操作
    const my_ref = ref(null);
   //然后在用到的地方,做下面的操作
   table = my_ref.value;
   console.log(table);//这里打印一下table看看是不是要的对象,并且可以看看有哪些属性或者方法可以用。
   table.bodyWrapper.scrollTop = 0;

我在本地是用的组合式api可以的(关键点是找到table对应的dom 节点,因为只有dom节点才有scrollTo方法可用)。具体如下:
html中

<el-table ref="table"></el-table>

在setup 中

setup(){
.....
const table = ref(null);

const handleCurrentChange = (val)=>{
   table.value.$refs.bodyWrapper.scrollTop=0;
}
.....

return {....,handleCurrentChange ,.....}
}

看起来你用的是非组合api的方式,那么对应的,在设置使用scrollTop的时候用下面的代码试试。

this.$refs.table.$refs.bodyWrapper.scrollTop=0;