当前位置: 首页 > news >正文

el-table自动滚动到最底部

在这里插入图片描述
我的需求是这样的,因为我的表格是动态的,可以手动新增行,固定表头,而且需要一屏显示,为了方便用户就需要再新增的时候表格自动向上滚动。
差了官方文档后发现有一个属性可以支持
在这里插入图片描述
这个属性正是自己需要的,所以接下来就好实现了,我的表格是封装的,有的是不需要自动滚动的,所以我是加了一个参数判断是否需要滚动,实现步骤是:

  1. 获取 el-table 的滚动容器。
  2. 使用 setScrollTop 属性设置滚动位置。
const table = ref(null);//表格加一个ref属性,我的属性值为table
//滚动到最新的添加行if(props.setScrollTop){nextTick(() => {if (table.value) {const $bodyWrapper = table.value.$el.querySelector('.el-table__body');if ($bodyWrapper) {table.value.setScrollTop($bodyWrapper.scrollHeight);}}})}
http://www.lryc.cn/news/417816.html

相关文章:

  • 小白零基础学数学建模系列-引言与课程目录
  • Integer类型比较是 == 还是equals()
  • 七夕情人节送什么礼物?看完这篇你就知道了
  • 让B站直接变成一个纯粹的音乐平台的简单小方法
  • 【MySQL 01】在 Ubuntu 22.04 环境下安装 MySQL
  • linux命令 根据某一字段去掉txt中重复的数据
  • LVS(Linux virual server)
  • End-to-End Object Detection with Transformers(Detection Transformer)翻译
  • uniapp打开地图直接获取位置
  • Qt的事件处理机制、信号和槽以及两者之间的区别
  • LSTM实战之预测股票
  • 30-50K|抖音大模型|社招3轮面经
  • ChatGPT首次被植入人类大脑:帮助残障人士开启对话
  • 数据结构-常见排序的七大排序
  • 程序员学CFA——财务报告与分析(四)
  • 【消息队列】kafka如何保证消息不丢失?
  • 不同随机数生成的含义
  • Jar工具完全指南:从入门到精通
  • 前端使用docx-preview展示docx + 后端doc转docx
  • Vue3 组件通信
  • 如何在Ubuntu 14.04上安装、配置和部署Rocket.Chat
  • ISO 26262中的失效率计算:IEC TR 62380-Section 15-Switches and keyboards
  • Linux安全与高级应用(五)深入探讨Linux Shell脚本应用:从基础到高级
  • Java中等题-解码方法(力扣)
  • 【Git】git 从入门到实战系列(二)—— Git 介绍以及安装方法
  • 【QT 5 QT 6 构建工具qmake-cmake-和-软件编译器MSVCxxxvs MinGWxxx说明】
  • SD卡参数错误:深度解析与数之寻软件恢复实战
  • 深入理解和应用RabbitMQ的Work Queues模型
  • 嵌入式面试八股文(三)·野指针产生原因和解决方法、指针函数和函数指针的区别
  • OpenCV 中 CV_8UC1,CV_32FC3,CV_32S等参数的含义