满口金牙 2021-10-30 13:23 采纳率: 91.1%
浏览 409
已结题

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

  • 写回答

4条回答 默认 最新

  • been_ss 2021-10-30 19:17
    关注

    哈喽,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
            }
        }
    };
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 11月10日
  • 已采纳回答 11月2日
  • 修改了问题 10月30日
  • 创建了问题 10月30日

悬赏问题

  • ¥50 用logisim设计16位单时钟周期cpu
  • ¥15 IDEA中圈复杂度如何具体设置
  • ¥50 labview采集不了数据
  • ¥15 请上面代码做什么处理或什么混淆
  • ¥15 英雄联盟自定义房间置顶
  • ¥15 W5500网线插上无反应
  • ¥15 如何用字典的Key,显示在WPF的xaml中
  • ¥15 weautomate读取Excel表格信息然后填写到网页一直报错,如何解决?
  • ¥15 C#如何在Webview2中获取网页验证码
  • ¥15 esp32烧录失败,具体情况在图片上