首先确保你在el-table上设置了一个ref属性,例如ref="myTable"。然后,你可以通过this.$refs.myTable访问到该组件的实例。之后,你可能需要找到表格内部的滚动容器 DOM 元素,并获取其scrollLeft和scrollTop值。 let scrollContainer = this.$refs.myTable.$el.querySelector('.el-table__body-wrapper'); let scrol...
1. 确定 el-table 组件的当前滚动位置 通常,你需要先获取 el-table 组件的 DOM 元素,然后才能检查或设置其滚动位置。这可以通过 Vue 的 $refs 来实现。 2. 设置 el-table 组件的滚动位置为顶部 一旦你有了 DOM 元素的引用,你可以直接设置其 scrollTop 属性为 0,来滚动表格到顶部。 3. 刷新 el-table 组...
consteditTableRef =ref();// 滚轮自动移动到表格底部方法constscrollToBottom= () => {nextTick(() =>{if(editTableRef.value) {// 跳到底部操作const$bodyWrapper = editTableRef.value.getTableRef() .$el.querySelector(".el-table__body");if($bodyWrapper) { editTableRef.value.getTableRef() ...
<el-table-columnprop="address"label="地址"width="240"></el-table-column> </el-table> 标签不是真正的容器,绑定了指令,无法生效 实现 第一步:判断滚到底部 const{ scrollTop, scrollHeight, clientHeight } = targetEl if(scrollHeight === scrollTop + clientHeight) { console.log('到底部了!') }...
// 插入数据相关代码 this.$nextTick(() => { setTimeout(() => { // 调到底部 this.$refs.testTable.bodyWrapper.scrollTop = this.$refs.testTable.bodyWrapper.scrollHeight; // 调到顶部 // this.$refs.testTable.bodyWrapper.scrollTop = 0; }, 500); }) } 注意,如果vue项目中install的不...
方法1、在el-table上手动添加滚动条 1、在el-table上方添加一个div,div的宽度和表格的宽度相同。 <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div> </div> <el-table ref="tableRef" :data="list" v-loading.body="listLoad...
const { top: tableTop } = tableBodyWrapper.getBoundingClientRect(); tableBodyWrapper.scrollTop += top - tableTop; // 滚动到展开行的位置 } } }); } else if (this.expandedRow === row) { // 当前行被收起 console.log(row) this.expandedRow = null; ...
.top-scroll{overflow-y:hidden;overflow-x:auto; .top-scroll-content{background-color:#FFF;height:1px;}} 底部滚动条 我的需求是这个底部滚动条就不要了 如果想要 上下双滚动条, 这个不写就行 ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x:hidden} ...
}); //跳到顶部操作 this.$refs.containerTable.bodyWrapper.scrollTop =0 //可根据页面高度设置 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 参考: 2021-12-10 el-table 行内新增,滚动条自动滚到最顶部,或者最底部
offsetHeight; } } // 设置滚动条位置 tableElement.bodyWrapper.scrollTop = totalHeight; // 在循环之外执行以下操作(标红选中的行) // for (let i = 0; i < theTableRows.length; i++) { // if (i === rowIndex) { // const rowEl = theTableRows[i]; // // 触发该行鼠标移入效果 /...