使用setScrollTop方法,首先需要获取到el-table的实例。可以通过ref属性给el-table组件指定一个名称,然后使用this.$refs来获取到实例。例如,在模板中给el-table指定ref属性: 然后,在组件的方法中通过this.$refs来获取到el-table的实例,并调用setScrollTop方法来设置滚动条的位置。例如: methods: { scrollToTop{ cons...
在Vue 组件的方法中,你可以通过 this.$refs 访问到 el-table 的引用,并调用其滚动方法。 将滚动位置设置为顶部: 对于Element UI,你可以直接设置 bodyWrapper 的scrollTop 属性为 0 来实现滚动到顶部。对于 Element Plus,则需要使用 setScrollTop 方法。以下是具体的代码示例: 对于Element UI: ...
// 插入数据相关代码 this.$nextTick(() => { setTimeout(() => { // 调到底部 this.$refs.testTable.bodyWrapper.scrollTop = this.$refs.testTable.bodyWrapper.scrollHeight; // 调到顶部 // this.$refs.testTable.bodyWrapper.scrollTop = 0; }, 500); }) } 注意,如果vue项目中install的不...
const{scrollTop, scrollHeight, clientHeight} = el if(scrollHeight === scrollTop + clientHeight) { binding.value&& binding.value() } } el.addEventListener('scroll', binding.handler) }, unbind(el, binding) { el.removeEventListener('scroll', binding.handler) el =null } } 把写好的指令在组...
<el-table ref="tableRef"> <script setup lang="ts"> const tableRef = ref() const scrollToTop = () => { tableRef.value.setScrollTop(0) } </script>
changed the title[Component] [tabs, table] ElTabls多页签下的隐藏的ElTable组件,强制重渲染后,依然不会触发滚动条重置到表格顶部[Component] [tabs, table] ElTabls多页签下的隐藏的ElTable组件,无法通过 setScrollTop(0) 重置滚动到表格顶部on Jun 25, 2024 ...
原理:两个滚动条滚动时,同时控制另一个滚动条滚动。 表格上下滚动条监听滚动距离 上下滚动条 ---滚动距离双向绑定 html: <divclass="top-scroll"ref="topScroll"><divclass="top-scroll-content":style="tableWidth"></div></div><el-tableref="tableData2":data="tableData"class="e-table"@selection-...
.top-scroll-content { /* 高度不设置的话滚动条出不来 */ height: 1px; } 1. 2. 3. 4. 5. 6. 7. 8. 2、给滚动条设置初始值 data(){ return{ topScrollWidth: 0, tableDom: null, } }, methods:{ setScrollWidth() { //设置顶部滚顶条宽度值为表格的滚动宽度 ...
Parent=vmEl.querySelector('.el-table__body-wrapper');this.Nowscroll=scrollParent.scrollTop;//table内部的滚动条的当前位置距离table表头的高度console.log(this.Nowscroll);},//页面数据更新后调用以下代码, 滚动到计算好的位置setTimeout(()=>{this.$refs.table.bodyWrapper.scrollTop=this.Nowscroll},...
setTimeout(()=>{if(this.$refs.myTable){this.tableWidth.width=this.$refs.myTable.bodyWrapper.scrollWidth+'px'this.$refs.myTable.doLayout()this.tableDom=this.$refs.myTable.bodyWrapperthis.tableDom.addEventListener('scroll',()=>{letscrollLeft=this.tableDom.scrollLeftthis.$refs.topScroll.scroll...