AntDesign -vue table 获取滚动条

表格操作：获取ref元素与滚动控制

最新推荐文章于 2024-11-13 14:24:41 发布

原创最新推荐文章于 2024-11-13 14:24:41 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

本文介绍了如何在Ant Design的表格组件中获取ref节点，并演示了如何设置表格body的滚动条位置。

<a-table 
    ref="tableRef" 
    :columns="columns" 
    :data-source="data" 
    :scroll="{ x: 1500, y: 300 }">
        <a slot="action" slot-scope="text">action</a>
  </a-table>

获取 ref节点

this.$refs.tableRef.$el.querySelector('.ant-table-body').scrollTop = 0

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

幼稚猿

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Ant-Design-Vue介绍（背景和原理、优缺点和作用、注意事项和策略以及动态表头并填充数据代码示例）

半夏微凉科技

06-04

1410

Ant Design Vue 是 Ant Design 的 Vue.js 实现版本，是一套基于 Vue.js 的企业级 UI 组件库。Ant Design Vue 继承了 Ant Design 在设计语言和用户体验上的优秀特性，并将其转化为适用于 Vue.js 生态系统的组件库，为开发者提供了丰富的组件和样式，可以帮助他们快速构建美观、易用的前端界面。

Vue3 使用ant design vue table组件实现自定义拖拽效果

专注于前端开发与实战技巧,记录从零到一的学习与项目经验。分享 Vue3 / JavaScript / TypeScript / Flutter /Uniapp等前端技术，以及性能优化、工程化、最佳实践。

07-07

5395

通过以上实现，我们完成了Vue3 + Ant Design Vue 自定义表格拖拽排序，支持动态行排序、固定列场景、后台排序结果生成，在实际业务中非常实用。你可以在此基础上扩展：✅ 增加“保存排序”按钮✅ 支持跨页排序✅ 拖拽动画优化👉 如果觉得有帮助，记得，方便后续快速复用！

参与评论您还未登录，请先登录后发表或查看评论

微信小程序使用TDesign：t-popup出现真机测试无法滚动问题

agesguyue的博客

06-10

2984

微信小程序项目，让用Tdesign这个新的ui，因为还是测试版，官方没有指南只有示例和api并且写的非常简单，就想着遇到的一些问题记录一下，方便以后借鉴使用。直接上代码片段

vue 实现el-table 顶部滚动条

Xxxxxx_q的博客

11-13

371

vue 实现el-table 顶部滚动条

Ant Design Vue的Table组件设置scroll属性时，表头去掉滚动条

g229191727的博客

06-10

7884

<a-table :scroll="{ y: 300 }" :pagination="false"></a-table> shi'yong

Ant Desing Vue

TheSpiritIsHeart的博客

07-29

317

Ant Design Vue组件的坑

Ant Design vue 组件table 水平和垂直滚动条

qq_43689775的博客

04-21

3584

Ant Design vue 组件table 水平和垂直滚动条

ant-design-vue@1.7.8扩展选择框动态加载与分页

肖晗的博客

09-13

1046

先不多说，上效果！全部数据自动分页动态加载分页功能（返回每一页数据）上滑分页引入开整 1. 全部数据自动分页 a. 简单的例子：单选、没有搜索、没有值的硬条件 b. 模拟一个稍微复杂的例子：多选、搜索 label 过滤、回填 label，分页处的显示总数等 2. 动态加载分页功能（返回每一页数据）上滑分页上滑动态加载数据组件文档地址

ant-Design-Vue动态表头像并填充数据

zx__200526的博客

06-11

495

要在 ant-Design-Vue 中实现动态表头，你可以使用动态的列属性（columns）和动态的数据（data）。运行程序后，将显示一个具有动态表头和填充数据的表格。运行程序后，将会显示一个带有动态表头和填充数据的表格。钩子中假设从后端获取到了表头和数据，通过遍历表头设置动态列属性，将表头保存在。最后，添加了一个垂直滚动条，用于滚动查看表格内容，并将表格和滚动条添加到窗口中。运行程序后，将显示一个具有动态表头和填充数据的表格窗口。创建了一个窗口，并在窗口中创建了一个。在上述示例中，我们创建了一个。

ant-design-vue table组件rowSelection 卡顿

最新发布

12-12

但是，需要注意的是，table组件本身可能已经支持虚拟滚动（在ant-design-vue 3.x中可能支持），而rowSelection卡顿可能是因为每行都有一个复选框，当数据量大时，渲染大量DOM节点导致性能问题。解决方案可能包括...

AntDesign -vue table 如何更改滚动条/如何通过ref获取更改滚动条

weixin_45271385的博客

12-28

1981

首先组件上加ref,注意ref不能和v-if一起用在mounted钩子函数里获取ref,塞到data里 this.dom = this.$refs.table 再定义函数 changeScroll(index){ this.$nextTick(()=>{ this.dom.$el.querySelector('.ant-table-body').scrollTop = index*20 }) }, 大家可以自由发挥，通过打印dom.$el,再使用quer

vue-infinite-scroll 搭配使用ant-design-vue 弹窗dialog无法触发loadMore方法

LoveHaixin的博客

02-16

787

vue-infinite-scroll 搭配使用ant-design-vue 弹窗dialog无法触发loadMore方法

antd 表格加y轴滚动时行与行间错位问题

chenlincc的博客

04-23

2329

当表格左侧或右侧列使用fixed 时，加y轴滚动会出现与普通行不对齐。 .ant-table-body-outer{ margin-top:5px !important; // 根据实际调整matgin-top 大小 } 如果使用全局样式，会使其它使用fixed，但没有使用Y轴滚动的列出现偏移。建议在局部样式使用 ...

Ant Design 滚动条样式修改

weixin_72099243的博客

03-06

673

滚动条的样式修改

ant-design-vue中table组件自动滚动

yangyanqin2545的博客

05-25

2869

ant-design-vue中table组件自动滚动

ant design vue中table表格滚动加载

weixin_71329368的博客

07-17

5189

在ant design vue组件库中，并没有提供可以直接监听table滚动的api，在此我使用了原生js去对table表格赋予一个监听表格滚动事件。在处理一写数据量特别大的情况下，我们不能把后端的数据一次性全部拿到前端在table表格中展示，为了考虑性能优化，使用了滚动加载表格数据。做这个功能之前，我们首先需要获取到table滚动到底部或者顶部时去触发方法。首先我想要对表格进行滚动加载，接口需要我传递的数据为行数，传递了行数来规定从第几行开始返回部分数据，具体返回数据的条数需要根据接口来定。

antd table横向滚动条样式自定义

qq_41916378的博客

11-24

3580

antd table横向滚动条样式自定义

antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）

qq_46490956的博客

09-04

3254

antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）

ant-design-vue的table动态列的显示和隐藏