首页 > 其他分享 >vue elementui中使表的滚动条 滚到顶部或底部

vue elementui中使表的滚动条 滚到顶部或底部

时间:2023-03-30 23:58:37浏览次数:45  
标签:vue 滚动 elementui refs tableList bodyWrapper 滚动条 scrollTop

1.设置table的ref为tableList
 
2.设置滚动至顶部
 
this.$refs.tableList.bodyWrapper.scrollTop =0;
 
3.设置滚动至底部
 
this.$refs.tableList.bodyWrapper.scrollTop =this.$refs.tableList.bodyWrapper.scrollHeight;
 
//如果请求完更新数据,需要使用$nextTick
this.$nextTick(() => {
    this.$refs.tableList.bodyWrapper.scrollTop=this.$refs.tableList.bodyWrapper.scrollHeight;
})

 

参考文章:(19条消息) element ui table scrollTop 滚动到行头或行尾_elementui 表格行头行尾_yusirxiaer的博客-CSDN博客

标签:vue,滚动,elementui,refs,tableList,bodyWrapper,滚动条,scrollTop
From: https://www.cnblogs.com/ErenYeager/p/17274819.html

相关文章

  • 第十九篇 vue - 深入组件 - 透传 Attributes - $attrs
    Attributes继承“透传attribute”指的是传递给一个组件,却没有被该组件声明为props或emits的attribute或者v-on事件监听器。最常见的例子就是class、style和id当一个组件以单个元素为根作渲染时,透传的attribute会自动被添加到根元素上。举例来说,假如我们有一个<......
  • 第二十篇 vue - 深入组件 - 插槽 - Slots
    插槽内容与出口我们已经了解到组件能够接收任意类型的JavaScript值作为props,但组件要如何接收模板内容呢?在某些场景中,我们可能想要为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段可以像这样使用<FancyButton>Clickme!<!--插槽内容--></FancyButton>......
  • elementUI 表单input输入框限制整数和小数长度
    <el-inputv-model="input1"placeholder="请输入内容"@keyup.native="input1=limitControlLine(input1,5,2)"></el-input>limitControlLine(val,zs,xs){letvalue=val;if(isNaN(val)){value=String(val).replace(/[......
  • vue3+vite+ts 配置@时vscode报找不到__dirname的问题
    vue3+vite+ts配置@时vscode报找不到__dirname的问题-CSDN博客  原因:path模块是node.js的内置模块,而node.js默认不支持ts文件的解决:安装@type/node依赖包 npminstall@types/node--save-dev......
  • vue动态添加input框
    效果代码点击查看代码</details><el-dialogtitle="添加":visible.sync="dynamicFormVisible"width="920px"><el-form:model="dynamicForm"><div><el-form-itemsty......
  • Vue3中Mitt的使用
    Vue中使用MittMitt是一个在Vue.js应用程序中使用的小型事件总线库。该库允许组件进行通信,而不必过度依赖父级或子级组件之间的props。Mitt的特性和功能介绍轻量级:Mit......
  • VUE3基础笔记
    date:2023-3-3010:00:00categories:-前端系列tags:-VUEtitle:VUE3基础笔记视频地址:2022最新Vue零基础小白入门教程,从入门到精通,快速上手简单易懂_哔哩哔哩_b......
  • vue是什么?vue的优点有哪些?
    https://blog.csdn.net/m0_64346035/article/details/124809501vue是指一个用于创建用户界面的渐进式框架,旨在更好地组织与简化Web开发;Vue的核心库只关注视图层,并且非常容......
  • element+vue2的查询form表单封装成组件复用
    <template><el-form:inline="true"style="display:flex;flex-direction:row;flex-wrap:wrap;flex:1;"class="formClass"label-width="90px......
  • Vue UI库
    UI组件库一般会问两个问题-基于哪个框架:比如Vue,React......-PC端||移动端移动端和PC端常见的UI库-移动端 -Vant:https://youzan.github.io/vant ......