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

el-table 滚动条重置 手动控制滚动条

最近在使用 el-table 的时候,出现一个问题:

表头过长的时候,会有左右滑动的操作,当我们把表格拉到最右侧,这个时候重新请求数据的话,表格位置还是在最右侧,不会恢复原位。

那我们想恢复原位,又不想重新渲染整个表格怎么办呢?

办法当然是有的!

我么可以发现,表格在不同位置,样式也是有些微差别的。

  • 表格滚动条在最左侧,is-scrolling-left
    在这里插入图片描述
  • 表格滚动条在中间,is-scrolling-middle
    在这里插入图片描述
  • 表格滚动条在最右侧,is-scrolling-right
    在这里插入图片描述

所以,我们判断组件是有相对应的方法的。

我们打印 table实例,可以看到上面挂载了非常多的方法,其中好多文档都没有介绍。

在这里插入图片描述
在这里,就有相对应的方法。

  • setScrollLeft :设置滚动条距离左侧的距离,接收一个数字作为参数。
  • setScrollTop :设置滚动条距离顶部的距离,接收一个数字作为参数。
<template>
	<el-table ref="tableRef"></el-table>
</template>
<script lang="ts" setup>
const tableRef = ref<any>(null);

const search = () => {
	...
	// 每次查询完成后,手动重置一下滚动条的位置
	tableRef.value.setScrollLeft(0);
}
</script>

你学会了吗?

在这里插入图片描述


http://www.kler.cn/a/379746.html

相关文章:

  • 智能语音机器人智能在哪里?AI人工智能电话机器人部署
  • H265编码丢帧问题分析
  • 网付碰一下支付系统功能分享来了!
  • 第十二章 spring Boot+shiro权限管理
  • 无人机的就业前景怎么样?
  • 【系统架构设计师】2024年上半年真题论文: 论云上自动化运维级其应用(包括解题思路和素材)
  • 鸿蒙OS带来前端的机遇:ArkTS与Typescript+ArkUI与SwiftUI的简单对比你就知道了
  • 【编程语言】Kotlin快速入门 - 泛型
  • 深入解密 K 均值聚类:从理论基础到 Python 实践
  • 72页PPT高效协同:SOP运营变革规划核心框架
  • VMware虚拟机Debian扩展磁盘
  • IO 多路复用技术:原理、类型及 Go 实现
  • 助力风力发电风机设备智能化巡检,基于YOLOv8全系列【n/s/m/l/x】参数模型开发构建无人机巡检场景下风机叶片缺陷问题智能化检测预警模型
  • 初级社会工作者试题
  • 代码随想录第十七天
  • [双指针] 盛最多水的容器, 有效三角形的个数, 和为s的两个数
  • uniapp 如何修改 返回按钮(左上角+物理按钮+侧滑)触发的返回事件
  • 【Docker系列】指定系统平台拉取 openjdk:8 镜像
  • 结构体对齐,位段
  • 支持 Mermaid 语言预览,用通义灵码画流程图
  • centos7 kafka高可用集群安装及测试
  • 【Git】SSH密钥
  • json和pb的比较
  • 第八篇: 通过使用Google BigQuery进行数据批量和自动化处理
  • 【MATLAB源码-第204期】基于matlab的语音降噪算法对比仿真,谱减法、维纳滤波法、自适应滤波法;参数可调。
  • unity游戏开发之--人物打怪爆材料--拾进背包的实现思路