解决antdesigntable表格fixed后出现空白列

最新推荐文章于 2023-03-06 22:24:36 发布

转载最新推荐文章于 2023-03-06 22:24:36 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_41940856/article/details/111870205

本文探讨如何在表格设计中使用fixed属性保持'设备编号'和'设备名称'列固定宽度，同时保持其他列如硬件ID和操作栏的灵活性。通过调整宽高和定制render，确保数据展示一致性。

解决方案

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: '绑定账号', dataIndex: 'meterUser', align: 'center'},
{title: '设备状态', dataIndex: 'meterState', align: 'center'},
{title: '操作', scopedSlots: {customRender: 'action'}, align: 'center',width:80,fixed:'right'},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

筱芙淘趣坊

关注关注

2
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

表格设置table-layout:fixed后对单元格宽度设置无效

09-25

在对HTML中的表格进行样式设置时，若使用了CSS的table-layout:fixed属性，则可能会遇到列宽设置无效的问题，尤其是当表格中存在跨列或多列合并的单元格时。这主要是因为当表格布局设置为固定时，表格的列宽不是由...

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

10-15

本文将深入探讨如何解决在切换ElementUI的tab页后，`el_table`的固定列下方出现多余线条的问题，以及与之相关的固定列显示不全的场景。首先，让我们分析问题的现象：在切换ElementUI的tab组件时，`el_table`的固定...

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

antdesignvue表格使用fixed出现空白列——已解决

King的博客

03-06

3024

【代码】antdesignvue表格使用fixed出现空白列——已解决。

ant design vue table 固定列后出现空列

weixin_38673922的博客

03-04

1618

解决办法：给固定列添加宽度

element-plus表格列空白问题解决方案

张大娃创业笔记

08-04

2625

element-plus表格列空白问题解决方案element-plus搭建表格出现多余空白原因以及解决方案 element-plus搭建表格出现多余空白首先来看下图，我们使用表格组件并且设置操作栏fixed浮动在右边的时候可能会出现空白部分原因以及解决方案原因是table组件没有固定宽度的父元素包裹，以至于table设置width=100%后组件内部无法准确计算浮动的位置，解决办法就是再写一个标签来包裹table组件，设置以下固定宽度或者这只flex:1,如下图是我的解决代码： ...

ant design Vue 固定列后出现空白列的情况（亲测可用）

前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！

01-14

1713

当表格固定右侧列之后当表头过短时会出现空白列的情况，这个时候给表头数据的固定列加上固定宽度就解决了。

element ui 表格动态列显示空白bug 修复方法

10-18

通过以上修复方法，可以有效解决Element UI表格在动态列减少时出现的显示空白问题。希望这个修复方法对使用Element UI进行项目开发的开发者们有所参考和帮助。在实际操作中，开发者们还需要根据自己的具体需求和代码...

精选资源

解决iview table组件里的固定列表格不自适应的问题

01-18

出现表格不自适应宽度问题具体如下解决这个bug 很简单把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }, { title: '订阅名称'...

解决ant-design表格固行和列多出空白列的问题

WebView

11-27

5236

1、问题描述在使用表格组件的时候，使用固定列，可能会遇到当你表头内容小于你设定的值时，会多出一列空白的问题。 2、解决以上问题只需要我们动态的去判断当有多少列的时候需要去固定列这个属性。 3、 4、 ...

antd+vue表格固定列之后出现空白列-解决方案

qq_43437571的博客

09-16

5925

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:;"

antDesign----table表格fixed固定表头后缩放浏览器多出一列空列？

writeBUG123的博客

04-30

3622

浏览器百分百没问题百分之80就多出来一列空白的大佬们遇到过这样的问题嘛请指教下小弟~~~ 表头代码如下：

antd table出现空白列的问题

youzigrowing的博客

11-24

2418

antd table出现空白列的原因及解决方法

react+ant -- table fixed 中间留白

Amen的博客

07-14

2546

问题：表格太多列，导致有滑动条，就希望固定头跟尾，方便用户操作，但是加了 fixed属性之后，头跟尾是固定了，但是中间有很多留白原因：表格每一列都有width属性，width 加起来的总和应该跟scroll={{x: 500}}中的宽度对上，或者scroll就不要写成固定的。放一张官网的解决办法官网地址：https://ant.design/components/tab...

【ant-design-vue】 a-table表头多出来一个空列

piano_diano的博客

03-11

3396

背景原因 scroll 的 x 设置的长度太长了 <a-table ref="table" size="middle" bordered :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" .

antd出现空白列问题解决

我还可以

03-08

1648

引发这种问题有两个原因：列太少，而且设置了宽度设置了固定头部或者尾部解决：删除width属性和fixed属性

antd Table 固定列空缺问题

qq_36800820的博客

11-15

3222

antd表格的固定列是用复制列然后覆盖在原表格上方实现的, 被固定的列此时还在原表格中, 但是被设置了隐藏如果不给固定的列设置固定的宽度就会导致两层列宽不一致, 上层列盖不住下面被隐藏的列的时候, 就会出现空缺这时候可以设置visibility: visible;让下面的列显示出来填补空缺, 就不会影响视觉和点击等, 但是只能固定在左侧的列使用 .dataTable { ...

ant design table 表格空白

speechless fish 的博客

05-18

2129

据我查找，情况可能有如下几点: 1、table设置了tableLayout:fixed，导致每个格子的css的color:transparent改变了原来的颜色 2、版本的不同，ant 版本的高低缓存问题，建议重启电脑，然后重新删除node_modules，再下载，可能和package.json、package-lock.json、和运行编译缓存的差异影起 ...