ant design vue中使用table 固定列遇到覆盖问题

最新推荐文章于 2024-07-31 17:23:18 发布
最新推荐文章于 2024-07-31 17:23:18 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue
原文链接：https://blog.csdn.net/weixin_39256211/article/details/85014246
版权

 看图就是第一列总是被压在下面

解决：

<a-table:scroll="{ x: 'max-content' }"></a-table>

使用列固定还需要注意的就是一定要控制外部的宽度。不然固定列的效果展示不出来。

推荐文章：ant design vue table表格的固定遇到的问题

小胖砸~
关注
专栏目录
antd表格固定列遮挡
Thelittlewhale的博客
09-13 3628
需求：在原本表格基础上设置左右列为固定列。 现有情况：个别表格不带勾选框，个别表格带勾选框。 问题描述：前者直接给列加上fixed即可，后者加上fixed会出现可移动列被左侧固定列遮挡部分的情况。 给表格设置固定列后，实际上就从一个表变为了多个表。原始的表格为一个表，含有最初的所有列，左侧固定列为一个表，右侧固定列为一个表。检查元素发现，原始表格勾选框的宽度较左侧固定列表中的勾选框宽度更短，导致移动列向前缩进被左侧固定列在上方遮挡。 查阅官方文档，找到选择功能的配置rowSelection，其中自定义列.
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant design vue table 表格设置了表头固定后单元格被遮挡（笔记）
Huang_John的博客
08-01 1178
antdv table表格被遮挡
Vue开发学习笔记:a-table组件设置固定宽度,同时保持列自适应
最新发布
JustWantToFly的博客
07-31 528
Vue开发学习笔记:a-table组件设置固定宽度,同时保持列自适应
antd table 固定列 遮挡滚动条解决
weixin_61028990的博客
07-06 699
【代码】antd table 固定列 遮挡滚动条解决。
Ant-Design-Vue中Table使用固定列后行之间对不齐的问题解决
永远年轻
11-24 1万+
文章目录使用 ant-design 官网上的 Table 固定样式代码实现效果展示查找问题解决方法 使用 ant-design 官网上的 Table 固定样式 链接: https://antdv.com/components/table-cn/#components-table-demo-fixed-columns 代码实现 由于我的项目要实现左边第一例为左固定，右边最后一列操作为右固定，按照官网上的操作一顿噼噼啪啪操作完后，效果图和代码如下： 效果展示 可以看到，我的 columns 列设置宽度的
前端开发之el-table(vue2中）固定列fixed滚动条被固定列盖住
m0_50207524的博客
04-08 977
在使用fixed固定列的时候会出现滚动条被盖住的情况。
antd+vue表格固定列之后出现空白列-解决方案
qq_43437571的博客
09-16 5503
antd+vue表格固定列之后出现空白列，如下： 代码如下： <a-col :md="24"> <h4>表格固定列</h4> <a-table :columns="columns" :data-source="dataTable" :scroll="{ x: 900 }" bordered> <a slot="action" slot-scope="text, record" href="javascript:;"
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
ant-design-vue(可拖拽table).vue
03-04
ant-design-vue(可拖拽table).vue
vue用ant design中table表格,点击某行时触发的事件操作
01-18
使用customRow 设置行属性，写对应事件 ...补充知识：Ant-Design-Vue table 合并单元格，并且添加点击事件 点击行，有一个customRow。可以配置点击事件。 单元格的自定义分为两种方式。 一种是：通过tem
vue: el-table 最后一列操作列设置为fixed后，最后一行有时候显示不完，感觉被遮挡了一半
热门推荐
weixin_40841731的博客
12-26 1万+
一、先看解决方案： 1、只修改当前页面样式： 给table设置class="tableClass" 在样式中： <style lang="less" > .tableClass { .el-table__fixed-right { height: 100% !important; //设置高优先，以覆盖内联样式 } ...
使用Ant Design的Table表格最后一列固定（fixed）出现重复
Cool的博客
03-18 2708
操作列右侧固定。在列很少情况下出现重复问题 对于没有bordered边框解决方案 { title: '编号', dataIndex: 'id', sorter: true, width: 100, align: 'left', render: text => text || '-' ...
antd table 固定列之后滚动条无法拖动
weixin_45653441的博客
07-27 2427
使用a-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动。解决方法将固定区域底部留出一个滚动条高度的距离。主要的问题就是固定区域盖住了横向滚动条。设置bottom值，使得不盖住滚动条。可以使用下面配置来解决。...
antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）
qq_46490956的博客
09-04 2477
antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）
antd Table 固定列空缺问题
qq_36800820的博客
11-15 3095
antd表格的固定列是用复制列然后覆盖在原表格上方实现的, 被固定的列此时还在原表格中, 但是被设置了隐藏 如果不给固定的列设置固定的宽度 就会导致两层列宽不一致, 上层列盖不住下面被隐藏的列的时候, 就会出现空缺 这时候可以设置visibility: visible;让下面的列显示出来填补空缺, 就不会影响视觉和点击等, 但是只能固定在左侧的列使用 .dataTable { ...
表格中使用fixed固定一栏后滚动条覆盖当前行内容
lmf13992427957的博客
12-12 432
加上以上样式即可解决滑动时滚动条覆盖当前行内容。
【vue】vue 解决position:fixed 遮盖下方元素问题
Meditation_Crazy
06-13 2338
前言 转载自：https://blog.csdn.net/weixin_40425415/article/details/111595120
Ant design Vue表格使用fixed错位
QiGeS的博客
04-08 3692
问题：固定右侧两个操作框，但是因为有的表格内容过长导致错位现象 解决方法： columns:[{ title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, ellipsis: true, // 设置为true 可以隐藏超出部分 fixed: 'right' }] 在表格中插槽,鼠标移入通过tooltip文字提示显示所有内容 <
ant design vue 中的table垂直居中
06-07
在 ant design vue 的 table 中，可以使用 `align` 属性来设置表格内容的对齐方式。你可以将 `align` 属性设置为 `center` 来实现表格内容的垂直居中，具体示例如下： ```html <template> <a-table :columns="columns" :data-source="data" :pagination="false"> <a-table-column title="姓名" dataIndex="name" align="center"></a-table-column> <a-table-column title="年龄" dataIndex="age" align="center"></a-table-column> <a-table-column title="地址" dataIndex="address" align="center"></a-table-column> </a-table> </template> ``` 在上面的示例中，将 `align` 属性设置为 `center`，即可实现表格内容的垂直居中。当然，你也可以将 `align` 设置为其他值，比如 `left` 或 `right`，来实现不同的对齐方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值