ant-design-vue table 使用列头跟表格不对齐

最新推荐文章于 2024-07-05 10:47:47 发布
最新推荐文章于 2024-07-05 10:47:47 发布
阅读量2.1k 收藏
点赞数 1
文章标签： css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ben_axb/article/details/106814933
版权

ant-design-vue table 列头跟表格内容对齐


百度到了说需要直接把表格头固定宽，试了下有效果但觉得的不够灵活，于是自己找到了一个较好的方法。这也解决了横向滚动条拖到底列不对齐的问题。
相比固定宽，可以一劳永逸。 

// 全局中添加以下样式
.ant-table-fixed-header .ant-table-scroll .ant-table-header{
    width: calc(100% - 8px);//减去滚动条的宽度
 }
Ben_axb
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Antd Table组件表头不对齐的问题
01-18
背景： 在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案： 1、对表格的每一行 【columns】设置width属性（留出一行进行宽度自适应）； 2、scroll属性中的x选择一个合适的值（或者直接设为 max-content）； 如果以上两步仍解决不了对齐问题的话，请继续第三步操作 3、对table的每一个td 添加 className=“word-wrap”，并设置对应样式 （因为t
ant design vue中a-table固定头和列后出现行内容不对齐的情况
weixin_42043532的博客
02-19 5132
如图所示，在固定头和列后出现了几个问题，查看原因后得知是表格下部出现滚动条导致的，所以我把左右固定列的高度减去滚动条的高度就可以解决这个问题 mounted () { // this.h = document.querySelector('.ptp-layout-main').offsetHeight - 45 const _this = this var tableBodyInnerNodeList = document.querySelectorAll('.ant-table-body-.
解决ant-design-vue的Table组件 增加了 scroll.y 配置，表头对不齐问题
csdn_bk的博客
07-05 998
在使用 ant-design-vue 的 Table 组件，在不使用分页器的情况下，让table内容固定高度，预期是出现滚动条。结果滚动条出现，表头和表内容列对不齐情况。
Ant Design Vue (3) table 表头与数据错位的解决方法
行走在前端的小菜仔的博客
09-15 7090
Ant Design Vue table组件表头与数据错位 对不齐解决方案 使用word-break: break-all 超过定义宽度自动换行
ant-design-vue a-table 表头固定后和内容不对齐的问题
ZTJ_123的博客
08-08 1万+
ant-design-vue a-table 表头固定后和内容不对齐的问题前言padding， border 和 margin固定内容列的宽度完整的columns和HTML内容(不太完整，没敢全放)笔记问题 前言 最近在项目中使用ant-design-vue，在做表格的时候需要固定表头，但是发现列对不齐，相信使用过的同学都遇到过这个问题。 网上各种查找，还是找不到解决办法，在这里强调一下，官方文档...
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
ant design vue a-table 表头和内容不对齐，一行代码解决问题
陈新科的博客
11-24 3651
动态设置x轴的长度就可以了，有几列表头就设置成百分之几，完美~ <a-table :columns="columns" :data-source="data" size="small" :loading="loading2" :scroll="{ x: `${columns.length}0%`, y: 400 }"//关键代码 > ...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant-design-vue(可拖拽table).vue
03-04
ant-design-vue(可拖拽table).vue
ant-design-vue中将表格同一列内数据排序、数据相同的单元格合并
06-08
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并； 包含原table数据排序，重组，行合并
ant-design-vue 实现表格内部字段验证功能
10-15
在使用ant-design-vue开发web应用时，经常需要在表格组件中对数据进行输入和编辑。为了确保数据的准确性，对输入字段进行验证是必不可少的环节。在本文中，我们将探讨如何在ant-design-vue中实现表格内部字段的验证...
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue...
antd表格固定后出现，对不齐的现象，解决方案
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-30 9837
问题描述： antd表格固定后出现对不齐的现象，比如设置了fixed。如下图 这个是官方的bug，在后续版本修复了 在3.26.1里修复了。 antd表格固定列对不齐现象https://github.com/ant-design/ant-design/issues/19952 解决方案： 1.升级版本（方案一） 但对于老项目，升级成本高或者暂时无法升级的就只能用样式强行控制了 2.样式控制（方案二） (1).github 上antd issues 19952给了一个方案 ...
antdv Table组件展开行数据对齐表头（自定义表头）
agua001的博客
04-07 5415
antdv Table组件展开行数据对齐表头（自定义表头）
ant-design-vue中a-table设置表头和表格内容不同对齐方式
free_to_learn的博客
07-14 2692
ant-design-vue中a-table设置表头和表格内容不同对齐方式
解决Ant Design Vue2表格a-table左右fixed固定列的行高与内容区域的行高不一致
qq_38118138的博客
05-11 7278
ant-design-vue解决表格a-table列固定时行高不一致的问题
ant design Table组件表头和内容宽度不对齐问题解决方案
csdn948423630的博客
05-09 1万+
你看，这里表头的宽度是200没错，但内容却少了几个px，明显不对，上网找了一大堆解决方案，什么设置百分比啊，设置绝对宽度啊，还是会这样，历经千辛万苦，终于解决了 给Table组件设置这个中英文都换行的样式 style={{ wordBreak: 'break-all' }} （中文和英文的换行机制不同） scroll的x轴宽度是我计算出来的，没想到设置个中英文都换行的样式...
ant-design Table组件错位/对不齐
热门推荐
baozhuona的博客
06-28 3万+
此篇乃小伙伴们在花式踩坑antdesign的table组件后，总结的专治对不齐的十全大补丸，望君趁早服用及时康复，如果你还踩出了更多花样对不齐，欢迎臭jio的你前来补充
antd table 列头和内容不对齐
风华绝代的博客
12-27 1万+
我是在已经给 每一列设置了宽的时候，依然遇到了列头和内容不对齐的情况，最后经过查询，得到的是，给最后一列不设置宽度，让其自己伸缩，就可以解决这个问题了...
ant-design-vue中table表格数据的自动滚动
最新发布
09-03
在Ant Design Vue (ant-design-vue) 中，Table组件默认不会自动滚动，但如果表格内容过多导致无法全部显示在视口中，你可以通过CSS样式或第三方库来实现滚动效果。以下是两种常见的做法： 1. **使用Vue的`v-if`或`v-show`结合`scroll`属性**: 当数据长度超过一屏时，你可以创建一个虚拟滚动区域(`<div v-scroll="yourScrollMethod">`)，然后在JavaScript中处理滚动事件。例如： ```html <template> <div v-scroll="scrollHandler"> <el-table :data="longData" /> </div> </template> <script> export default { methods: { scrollHandler(scrollY) { // 更新表头或其他需要跟随滚动的位置 this.$refs.myTable.scrollTop = scrollY; } }, data() { return { longData: [...], // 长度很大的数据源 }; } }; </script> ``` 2. **利用第三方滚动库，如vue-virtual-scroller**: 如果你需要更复杂的滚动功能，可以引入像vue-virtual-scroller这样的库。它能只渲染可视区的数据，提高性能。安装并配置这个库后，可以在Table组件上应用。 ```bash npm install vue-virtual-scroller ``` 然后在Table组件上使用： ```html <template> <VirtualScroller :items="longData" @scroll-end="scrollEnd"> <el-table :data="items" /> </VirtualScroller> </template> <script> import VirtualScroller from 'vue-virtual-scroller'; export default { components: { VirtualScroller }, computed: { items() { return this.longData.slice(this.start, this.end); }, start() { return Math.floor(this.vscachedScrollTop / this.itemHeight); }, end() { return Math.min(Math.ceil((this.vscachedScrollBottom + this.itemHeight) / this.itemHeight), this.longData.length); } }, mounted() { this.vscachedScrollTop = 0; // 初始化滚动位置 }, watch: { '$vscachedScrollTop': 'scrollEnd' }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值