antd table 固定列之后滚动条无法拖动

最新推荐文章于 2024-11-21 17:17:06 发布
最新推荐文章于 2024-11-21 17:17:06 发布
阅读量2.5k 收藏 2
点赞数 3
分类专栏： 前端 antd 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45653441/article/details/126012142
版权
前端 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
antd
7 篇文章 0 订阅
订阅专栏
当使用Ant Design的a-table组件并设置fixed属性来固定表格列时，可能会遇到固定列覆盖横向滚动条的问题。为了解决这个问题，可以调整CSS样式，设置固定区域的底部间距为滚动条的高度，例如设置`bottom: 15px!important;`，确保滚动条可见。通过这种方法，可以避免固定列遮挡横向滚动条，保持表格的正常使用。
摘要由CSDN通过智能技术生成

使用a-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动
主要的问题就是固定区域盖住了横向滚动条

解决方法：将固定区域底部留出一个滚动条高度的距离
可以使用下面配置来解决

 ::v-deep .ant-table .ant-table-fixed-left {
  height: auto !important;
  bottom: 15px !important;
  &::before {
    background-color: #fff;
  }
}

设置bottom值，使得不盖住滚动条

ant-design-vue 下拉框随页面滚动问题
Jack, what else can you do besides holding your little darling?
08-24 495
ant-design-vue 下拉框随页面滚动问题
解决ant-design table组件 固定列后滚动卡顿问题
qq_16603051的博客
09-28 3905
1.源码分析 1.1 node_modules\ant-design-vue\es\vc-table\src\Table if(window.navigator.userAgent.match(/Trident\/7\./)&&scroll.y) 改为 if(scroll.y) 解决滚动不同步问题 1.2 node_modules\ant-design-vue\es\vc-table\src\BaseTable 注释 //this.store.currentHoverKey...
antd中table组件关于scroll滚动条的问题
热门推荐
u010565037的博客
03-24 1万+
问题： 如何控制才能让翻页的时候，把当前的滚动条定位到表格的顶部？这样可以确保每次翻页时列表数据是从上往下阅读的。 当前官方提供的在当前页阅读列表下滑后，再翻页后滚动条还是在原处。 解决方法： 获取到table的dom import ReactDOM from 'react-dom'; <Table ref={(ref)=>this.table=ref} /> ...
a-table固定x,y轴后、出现表头和内容对不齐
最新发布
m0_64333154的博客
11-21 289
解决表头和内容对不齐、将最后一个column width不设置，其他列设置宽度。 <a-table ref="table" size="middle" :scroll="{ x:1500, y: 500 }" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :paginati
antd表格a-table滚动失效。x轴滚动失效
Sunny_lxm的博客
04-19 3093
antd表格a-table滚动失效。x轴滚动失效 页面html代码如下。实现左右布局，左边侧边栏固定宽度，右边沾满剩余宽度
antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）
qq_46490956的博客
09-04 2699
antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）
antd 页面滚动下拉框不动问题
Jack_error的博客
03-24 2447
antd处理下拉框不随页面滚动问题 在antd中下拉框组件有很多比如： Select、SelectTree、DatePicker等，在点击后会出现下拉选择框，但是当我们华东页面时，会发现下拉框固定不动。 下面我给大家讲一下解决办法吧！ 分析 原因： 我们查看antd关于下拉选择时不难发现有个api叫 可以看到默认是挂到body的新建div上 但一般我们使用下拉选择框时，都会有父节点 包裹着选择组...
table 列可左右拖动
11-09
"table 列可左右拖动"的功能使得用户可以根据需要调整列宽，提高用户体验，特别是当表格内容较多，需要横向滚动条时，用户可以更方便地查看和操作表格。 实现这一功能通常涉及以下几个关键知识点： 1. **...
React(hook)基于antd Table实现可拖拽调整列宽的表格
weixin_38884718的博客
03-29 6697
React基于antd Table实现可拖拽调整列宽的表格 前言        在日常的工作开发中，会经常的用到表格，进行数据展示，但是数据的长度不一，初始设置的表格列宽不一定符合数据的展示要求，故有时需要手动的进行表格列宽的调整。        用过antd的童鞋，都知道antd的表格并不支持列拖拽功能；那么在react+antd的项目中如何实现可拖动表格呢？ 实现功能 1：表格列宽初始自动分配、列宽总和不能超过容器宽度（无
antd可伸缩列实现优化
bin_zi_123的专栏
11-20 7311
问题描述： 为了向用户展示更丰富的数据，更多的内容，需在展示的列表页中设置列宽可随意拖动。antd官网提供了列宽可拖动的示例，经测试原示例并不好用，且使用有限制，列宽拖拽响应很慢，拖动时会造成其它列宽比较大的变化，针对内容较多的列并不能做到随着列宽的变化，内容也相应增减。 antd现可伸缩列问题展示 1. antd官网示例，当列宽拖动到比内容小时，内容将会出现换行，将行高度撑开 2....
修改 antd table 滚动条 的样式
11-19
在Ant Design Table组件中，如果你想要修改滚动条的样式，你可以通过自定义CSS或者利用CSS模块覆盖默认样式来实现。这里是一个基本的步骤： 1. **自定义全局CSS**: 如果你希望对所有Table组件的滚动条样式都进行...
TABLE滚动条
03-17
NULL 博文链接：https://sxpyrgz.iteye.com/blog/466492
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
10-16
- **表头样式**：为了让表头固定，需要对`thead`和`tbody tr`应用`display: table`和`table-layout: fixed`。这使得列宽度根据其内容自动扩展，即使在滚动时也能保持对齐。 ```css table thead, tbody tr { ...
u-table 加了合计后, 固定列的滚动条无法使用（umy-ui）延伸：iview Table 表格同上bug
weixin_44019706的博客
10-26 725
因为没有录屏，但是 根据图1和图2可以看出来，鼠标在非固定列位置是深色，在固定列位置是浅色，深色是可以左右滑动，浅色不能左右滑动。CSS中的’ pointer-events '属性决定了一个元素是否可以成为指针事件的目标。此时是成功了，可以滚动了，但是此时还有一个问题：固定列左侧和右侧，都不能点击了，如：点击编辑无效。
ant design vue中使用table 固定列遇到覆盖问题
qq_43468165的博客
08-13 1780
看图就是第一列总是被压在下面 解决： <a-table:scroll="{ x: 'max-content' }"></a-table> 使用列固定还需要注意的就是一定要控制外部的宽度。不然固定列的效果展示不出来。 推荐文章：
ant design vue 的 a-table隐藏滚动条
motoudi的博客
07-16 545
【代码】ant design vue 的 a-table隐藏滚动条。
ant-design-vue table表头拖拽功能 踩坑
czx3387170的博客
03-14 3709
用官方的DEMO也可以，但是有几点必须要注意，否则拖拽不成功， 1、vue-draggable-resizable的版本必须是2.1.0，其他版本有冲突。 npm installvue-draggable-resizable@2.1.0 2、必须在table-draggable-handle样式中加入：transform:none; position:absolute 否则不起效果 ant-design-vue版本是1.7.2 vue版本是2.6.11 import Vue from 'v...
ant-design-vue 的通过控制a-table的滚动条实现表格滚动效果
qq_47648083的博客
04-17 3661
鼠标移入滚动条停止滚动，鼠标移出滚动条继续滚动。
antd中table，a-table新增数据滚动条滚到底部
qq_30351747的博客
10-27 2546
antd中table，a-table新增数据滚动条滚到底部
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>