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

最新推荐文章于 2024-05-10 15:46:42 发布
最新推荐文章于 2024-05-10 15:46:42 发布
阅读量2.3k 收藏 1
点赞数 3
分类专栏： 前端 antd 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45653441/article/details/126012142
版权
前端 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
antd
7 篇文章 0 订阅
订阅专栏

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

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

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

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

故事与九
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Antd Table组件表头不对齐的问题
01-18
背景： 在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案： 1、对表格的每一行 【columns】设置width属性（留出一行进行宽度自适应）； 2、scroll属性中的x选择一个合适的值（或者直接设为 max-content）； 如果以上两步仍解决不了对齐问题的话，请继续第三步操作 3、对table的每一个td 添加 className=“word-wrap”，并设置对应样式 （因为t
TABLE滚动条
03-17
NULL 博文链接：https://sxpyrgz.iteye.com/blog/466492
a-table固定列和普通列行高不一致的解决办法
最新发布
weixin_46190955的博客
05-10 233
【代码】a-table固定列和普通列行高不一致的解决办法。
antd表格a-table滚动失效。x轴滚动失效
Sunny_lxm的博客
04-19 2397
antd表格a-table滚动失效。x轴滚动失效 页面html代码如下。实现左右布局，左边侧边栏固定宽度，右边沾满剩余宽度
antd 页面滚动下拉框不动问题
Jack_error的博客
03-24 2258
antd处理下拉框不随页面滚动问题 在antd中下拉框组件有很多比如： Select、SelectTree、DatePicker等，在点击后会出现下拉选择框，但是当我们华东页面时，会发现下拉框固定不动。 下面我给大家讲一下解决办法吧！ 分析 原因： 我们查看antd关于下拉选择时不难发现有个api叫 可以看到默认是挂到body的新建div上 但一般我们使用下拉选择框时，都会有父节点 包裹着选择组...
u-table 加了合计后, 固定列的滚动条无法使用（umy-ui）延伸：iview Table 表格同上bug
weixin_44019706的博客
10-26 529
因为没有录屏，但是 根据图1和图2可以看出来，鼠标在非固定列位置是深色，在固定列位置是浅色，深色是可以左右滑动，浅色不能左右滑动。CSS中的’ pointer-events '属性决定了一个元素是否可以成为指针事件的目标。此时是成功了，可以滚动了，但是此时还有一个问题：固定列左侧和右侧，都不能点击了，如：点击编辑无效。
ant-design-vue table表头拖拽功能 踩坑
czx3387170的博客
03-14 3527
用官方的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...
固定Table第一行或某几行不随滚动条滚动而滚动
01-19
样式： 复制代码代码如下: .fixedHead { position: relative; top:[removed]this.offsetParent.scrollTop...复制代码代码如下: <div> <table class=”con_tbl”> ”fixedHead”> 标题不动</th> </tr> ”code”> <t
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
主要介绍了解决elementUI 切换tab后 el_table 固定列下方多了一条线问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
antd-table-react.zip
07-13
antd-table(react)实现表格首行、首列固定，压缩包中代码下载即用。可以根据实际需求灵活进行修改。先npm install，然后npm run start即可看到表格哟。
在antd Table中插入可编辑的单元格实例
01-21
看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是...
ant-design-vue 的通过控制a-table的滚动条实现表格滚动效果
qq_47648083的博客
04-17 2791
鼠标移入滚动条停止滚动，鼠标移出滚动条继续滚动。
antd中table，a-table新增数据滚动条滚到底部
qq_30351747的博客
10-27 2279
antd中table，a-table新增数据滚动条滚到底部
a-table设置滚动条以及数据内容过多省略号显示鼠标悬浮显示全部内容
weixin_48907405的博客
04-20 3618
加上滚动条后，数据过长就会导致行高撑开那么在样式里面添加以下几项。
antd表格固定列遮挡
Thelittlewhale的博客
09-13 3493
需求：在原本表格基础上设置左右列为固定列。 现有情况：个别表格不带勾选框，个别表格带勾选框。 问题描述：前者直接给列加上fixed即可，后者加上fixed会出现可移动列被左侧固定列遮挡部分的情况。 给表格设置固定列后，实际上就从一个表变为了多个表。原始的表格为一个表，含有最初的所有列，左侧固定列为一个表，右侧固定列为一个表。检查元素发现，原始表格勾选框的宽度较左侧固定列表中的勾选框宽度更短，导致移动列向前缩进被左侧固定列在上方遮挡。 查阅官方文档，找到选择功能的配置rowSelection，其中自定义列.
ant design vue中使用table 固定列遇到覆盖问题
qq_43468165的博客
08-13 1569
看图就是第一列总是被压在下面 解决： <a-table:scroll="{ x: 'max-content' }"></a-table> 使用列固定还需要注意的就是一定要控制外部的宽度。不然固定列的效果展示不出来。 推荐文章：
ant design vue a-table横向滚动条不见了的处理方法
SZHFCLXX的博客
07-17 2424
给a-table加上所有列所配的width和xxx作为📜{x: xxx},即可。
关于antdv表格a-table设置scroll属性后表格行错位解决方案
热门推荐
cabinx的博客
01-15 1万+
antdv表格a-table设置scroll属性后表格行错位解决方案 1.需求背景 最近开发财务项目中使用到了UI框架antdv，使用a-table后需要设置表格一屏显示，即表格内容超过了屏幕之后显示滚动条，但是表格行内容出现错位。 解决方案 1.先设置a-table的scroll属性，如下： <a-table ref="table" size="small" rowKey="id" :columns="columns"
antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）
qq_46490956的博客
09-04 2058
antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）
antd table sticky 固定滚动条
05-26
Antd Table 组件可以实现固定表头和固定列，但是在滚动时并不能固定滚动条。不过我们可以通过 CSS 样式来实现这个功能。 具体实现方法如下： 1. 给表格容器（Table）设置高度和 overflow 属性，使得表格内容超出容器高度时出现滚动条。 ```css .table-container { height: 500px; overflow: auto; } ``` 2. 给表格容器的滚动条（::-webkit-scrollbar）设置样式，使其固定在表格容器的右侧。 ```css .table-container::-webkit-scrollbar { width: 10px; height: 100%; } ``` 3. 给滚动条的滑块（::-webkit-scrollbar-thumb）设置样式，使其颜色和样式与表格容器的表头和固定列一致。 ```css .table-container::-webkit-scrollbar-thumb { background-color: #fafafa; border: 1px solid #e8e8e8; border-radius: 5px; } ``` 完整示例代码如下： ```jsx import React from 'react'; import { Table } from 'antd'; import './styles.css'; const data = [...]; const columns = [...]; const App = () => { return ( <div className="table-container"> <Table dataSource={data} columns={columns} scroll={{ x: 'max-content' }} pagination={false} /> </div> ); }; export default App; ``` ```css .table-container { height: 500px; overflow: auto; } .table-container::-webkit-scrollbar { width: 10px; height: 100%; } .table-container::-webkit-scrollbar-thumb { background-color: #fafafa; border: 1px solid #e8e8e8; border-radius: 5px; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值