antd table出现空白列的问题

最新推荐文章于 2025-10-14 10:41:56 发布
原创 最新推荐文章于 2025-10-14 10:41:56 发布 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文探讨了在使用Ant Design的Table组件时遇到的滚动列出现空白的问题。原因是所有列设置的固定宽度总和小于表格宽度，导致出现额外的空白列。为解决此问题，建议至少保留一列不设定宽度，使其自适应宽度，从而避免空白列的出现。 
<a-table
            rowKey="id"
            :columns="evalTypeList"
            :data-source="loadData"
            ref="table"
            :rowClassName="rowClassName"
            :pagination="pagination"
            :scroll="{ x: 1200 }"
            @change="changeData"
            bordered
          >
</a-table>

table中需要有个固定列，所以用了scroll属性，但是发现表格出现了一个空白列
原因：列都设置了固定宽度，导致所有的宽度加起来没有表格宽度长，会出现空白列
解决:建议至少留一个列不设宽度，以自适应宽度。

Vue中使用antd-table组件实现数据选择、禁用、已选择禁用-demo
JackieDYH的博客
04-07 400
2、当状态为1时，表示之前已经选择过，显示状态为勾选并禁用状态，禁止取消。selectStatus: "0", // 0未选中 1选中 2不可选。注意：表头上的全选按钮，只能操作状态为0的数据，其他数据不能操作。1、当状态为0时，表示前台页面可以自由选择和取消。3、当状态为2时，表示不可选择，显示为禁用状态。表格根据从后端获取的数据进行状态显示和控制。
antd表格固定列出现空白间隙问题
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-02 7979
前言： antd表格设置了fixed属性后，在设置scroll:x的时候会出现空白间隙。 如下图： 解决方案： 1.动态计算宽度 //动态计算columns width属性（width属性不要加单位px） countX = (arr) => { return arr.reduce((cur, next) => { return cur + (next.width ? next.width : 0) }) } let columns=[{.
＜a-table 添加 scroll 属性后出现一行空白tr
最新发布
weixin_45440916的博客
10-14 163
。给a-table加了个滚动条，结果出现一行tr，想要直接使用display:none去掉。但是结果就是，表头文字也会一块被去掉，表头拉长，没有得到想要的效果。在visibility:collapse表格里和display:none差不多，都是隐藏不占地，主要适用于表格行 (<tr>)、表格列 (<col>)、表格行组 (<tbody>)、表格列组 (<colgroup>) 等
解决ant 文字超过table td宽度隐藏 ，表头固定后有多余空白问题！2021-07-26
m0_50599032的博客
07-26 1717
解决ant 文字超过table td宽度隐藏 ，表头固定后有多余空白问题！ 首先ant 自带api ellipsis：true 为文字超出表格宽度隐藏， 但实际给了width宽度却不起作用 这里文字后并没有…而且宽度是自适应，这里需要给全局样式加上 `javascript .ant-table-fixed-left table, .ant-table-fixed-right table { width: min-content; } 这里转自网络`` 感谢作者暂时找不到链接了~ 加上以后出现了
antdesignvue表格使用fixed出现空白列——已解决
King的博客
03-06 3021
【代码】antdesignvue表格使用fixed出现空白列——已解决。
【ant-design-vue】 a-table表头多出来一个空列
piano_diano的博客
03-11 3389
背景 原因 scroll 的 x 设置的长度太长了 <a-table ref="table" size="middle" bordered :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" .
精选资源
在antd Table中插入可编辑的单元格实例
01-21
看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是...
精选资源
解决iview table组件里的 固定列 表格不自适应的问题
01-18
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', ...
antd table 为空时
12-28
### 解决 Ant Design Table 组件在没有数据时的显示问题 对于 Ant Design 的 `Table` 组件，在面对无数据显示的情况时，可以通过配置组件属性来优化用户体验。当表格内没有任何记录时，默认情况下会展示一条提示...
改成适用于react antd Table的虚拟滚动
04-16
Ant Design Table的渲染方式是基于列的配置，每个列可以自定义render方法。虚拟滚动通常涉及动态渲染可见区域的行，而不是全部渲染，这样可以提高性能，特别是在大数据量时。 可能的步骤包括：首先，获取Table的...
antd table 加滚动scroll出现空白行
weixin_46600931的博客
11-04 899
antd 这个组件库好多坑。
解决antdesigntable表格fixed后出现空白列
淘淘小窝
07-22 2995
解决方案 fixed列设置固定width空白列就没了 {title: '设备编号', dataIndex: 'meterCode', align: 'center',width: 200,fixed: 'left'}, {title: '设备名称', dataIndex: 'meterName', align: 'center',width: 200,fixed: 'left'}, {title: '硬件ID', dataIndex: 'meterId', align: 'center'}, {title:
antd table 表格在写滚动的时候会多出一行空白行
m0_66698608的博客
08-25 1176
【代码】antd table 表格在写滚动的时候会多出一行空白行。
ant design Vue 固定列后出现空白列的情况（亲测可用）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
01-14 1713
当表格固定右侧列之后当表头过短时会出现空白列的情况，这个时候给表头数据的固定列加上固定宽度就解决了。
ant design vue table 固定列后出现空列
weixin_38673922的博客
03-04 1618
解决办法：给固定列添加宽度
antd中表格加bordered后出现的一个空列表问题
qq_43628847的博客
03-30 677
<s-table bordered ref="irrigationWaterTable" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" showPagination="auto" :pagination="{ showTotal: (total) =.
antd出现空白列问题解决
我还可以
03-08 1648
引发这种问题有两个原因： 列太少，而且设置了宽度 设置了固定头部或者尾部 解决： 删除width属性和fixed属性
解决a-table设置固定宽度后有空白列的问题
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
02-17 1481
【代码】解决a-table设置固定宽度后有空白列的问题。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值