ant-design或el-table里a-table表格错位问题解决办法

原创已于 2022-10-17 16:28:54 修改 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#anti-design-vue #elementui

于 2022-10-17 16:28:21 首次发布

当表格中某一列数据高度不一致时，可能导致表格错位。一种解决方案是在最后一行添加不赋值的自定义列，不设置宽度，或者取消当前最后一列的宽度设定，让表格自动调整。

ant-design或el-table里a-table表格错位问题解决办法

当某一列的数据高度高于其他普通列时就会导致表格错位对不齐，重新加载会重新计算就可以了，不过我们可以在最后一行重新自定义加一列不赋值然后不设置宽度既可解决，或者将现在自身的最后一列宽度取消也可以，因为会自动给宽度
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

广寒君

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决 Ant 版本 1.7.8 组件中 a-table 固定列导致表头错行问题

不可云

03-25

1758

但是与正常显示的表格样式对比可以看出，问题出现在 margin-bottom 上，正常显示的表格样式 margin-bottom 的属性值是 -8px，但是具体造成这个现象的原因，没有深入细追。这里说明一下为什么不能修改 padding-bottom 的值，这个方法要用在每一个表格组件中，错行和正常显示的 padding-bottom 的值都是0，如果修改 padding-bottom 会影响正常的表格显示，就会出现以下现象。但是这个问题，有可能不是必现的，像我这边，本地没有问题，只在服务器上有问题。

ant table组件使用心得-表头不对齐解决办法

余光的博客

01-15

1万+

实习期间遇到需要列表展示数据的需求，从ant开源库上拿下来示例代码如下使用的场景时在react项目中，所有直接引入一使用 1.引入组件 import { Table } from ‘antd’; 2.手动写入需要渲染的数据这里不细说了，在模版中，为你提供了很多种排列方式，有跨行显示，也有跨列显示 3.render中写table组件 <Table columns={colu...

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

css修改浏览器默认滚动条样式

qq_44417271的博客

05-25

1152

/*滚动条样式*/ ::-webkit-scrollbar { width: 4px; /*height: 4px;*/ } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-track { -webkit-box-s.

ant-design Table组件错位/对不齐

热门推荐

baozhuona的博客

06-28

4万+

此篇乃小伙伴们在花式踩坑antdesign的table组件后，总结的专治对不齐的十全大补丸，望君趁早服用及时康复，如果你还踩出了更多花样对不齐，欢迎臭jio的你前来补充

关于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"

a-table固定表格高度后出现错位

ChenQiyyds123的博客

07-31

656

a-table设置:scroll="{y:300}" 固定高度后出现错位。使用最简单的方法解决。

ant-design-vue table 表格组件错位解决

baidu_33164415的博客

12-26

2923

ant-design-vue table 表格组件错位解决

一个属性border-collapse解决Table的边框问题

09-25

在网页设计中，表格（Table）是构建和组织内容的一种常用元素，但在过去，带边框的表格设计却经常让网页开发者感到头疼。原因在于，如果要创建一个看起来整洁美观的表格，需要花费大量的时间和精力去调整边框，以...

ant-design a-table滚动

07-31

根据用户需求，用户想了解如何在ant-design的a-table组件中设置滚动功能。结合提供的引用内容，我将整理设置滚动条的方法以及解决滚动条导致样式错位的问题。核心知识点： 1. 设置滚动：通过scroll属性，设置x或y...

ant-design-vue中表格的ellipsis时修改poper的宽度

10-15

首先，用户的问题是："我想查找在ant-design-vue中，当表格使用ellipsis时修改poper宽度的方法"。用户指定了ant-design-vue框架，并且提到了使用ellipsis时的popover宽度修改。回顾系统级指令： - 所有行内数学...

Vue+Ant Design of Vue二次封装Table+Pagination 组件

weixin_56749645的博客

05-10

3121

Vue+Ant Design of Vue组件Table+Pagination二次封装前言在Vue的Ant-Design-Of-Vue-Table组件中，你可以对ant-design-of-vue-Table组件进行二次封装，这样可以减少页面代码重复，使页面代码更简洁、更容易操作。 1.新建一个table.js文件(T...

a-table的表头和表格体对齐

最新发布

10-22

我们正在解决关于Ant Design Vue的a-table组件表头和表格体对齐的问题。根据引用[1]和引用[2]提供的思路，我们可以采用以下方法： 1. 引用[1]中提到，通过给第一个列表元素（即el-table-column）添加key值可以...

ant design vue中a-table固定头和列后出现行内容不对齐的情况

weixin_42043532的博客

02-19

5858

如图所示，在固定头和列后出现了几个问题，查看原因后得知是表格下部出现滚动条导致的，所以我把左右固定列的高度减去滚动条的高度就可以解决这个问题 mounted () { // this.h = document.querySelector('.ptp-layout-main').offsetHeight - 45 const _this = this var tableBodyInnerNodeList = document.querySelectorAll('.ant-table-body-.

a-table列同时使用ellipsis和fixed导致的错位问题

weixin_61028990的博客

04-13

669

【代码】a-table列同时使用ellipsis和fixed导致的错位问题。

react使用antd table合并单元格错位问题

m0_51682391的博客

03-06

1896

react使用antd table合并单元格错位问题

vue-ant-design:a-table使用合并单元格以及合并后数据错位

爱写代码的猴子的博客

12-08

4546

vue-ant-design:a-table使用合并单元格以及合并后数据错位

ant design vue a-table 表头和内容不对齐，一行代码解决问题

陈新科的博客

11-24

4895

动态设置x轴的长度就可以了，有几列表头就设置成百分之几，完美~ <a-table :columns="columns" :data-source="data" size="small" :loading="loading2" :scroll="{ x: `${columns.length}0%`, y: 400 }"//关键代码 > ...

antd——table样式：表头和表体错位问题

yehaocheng520的博客

12-27

1万+

今天测试遇到一个问题，如下图所示：使用ant design vue的框架搭建的表格中，出现表头和表体出现错位的问题。解决方法如下： 1.设置scroll——:scroll="{ y: 500, x: 1400 }" 主要是横向要设置，也就是x，y方向设置是为了固定表头。 2.设置columns——列宽度 <a-table :rowKey="(r, i) => i" :scroll="{ y: 500, x: 1400 }" :columns="column