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

最新推荐文章于 2023-12-25 10:50:34 发布
最新推荐文章于 2023-12-25 10:50:34 发布
阅读量4.9k 收藏 1
点赞数 2
分类专栏： # dva-umi2-ant-design-pro 文章标签： ant-design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45416217/article/details/110229554
版权

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

前端设计诗
关注
专栏目录
解决antd 2.x table组件columns fixed后列表头多出一块的问题
he_web369的博客
12-04 1941
解决antd 2.x table组件columns fixed后列表头多出一块的问题 操作栏重复渲染使样式难看。 columns里的操作栏代码： { title: `操作`, key: 'operation', render: (text, record) => { return <DropOption onMenuClick={e => this.handleMenuClickCh
ant-design Table组件错位/对不齐
热门推荐
baozhuona的博客
06-28 4万+
此篇乃小伙伴们在花式踩坑antdesign的table组件后，总结的专治对不齐的十全大补丸，望君趁早服用及时康复，如果你还踩出了更多花样对不齐，欢迎臭jio的你前来补充
ant-design-vue中将表格同一列内数据排序、数据相同的单元格合并
06-08
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并； 包含原table数据排序，重组，行合并
ant design Vue 固定列后出现空白列的情况（亲测可用）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
01-14 1410
当表格固定右侧列之后当表头过短时会出现空白列的情况，这个时候给表头数据的固定列加上固定宽度就解决了。
ant design vue table 固定列后出现空列
weixin_38673922的博客
03-04 1463
解决办法：给固定列添加宽度
【ant-design-vue】 a-table表头多出来一个空列
piano_diano的博客
03-11 2984
背景 原因 scroll 的 x 设置的长度太长了 <a-table ref="table" size="middle" bordered :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" .
antd table出现空白列的问题
最新发布
qiqiliuwu的博客
12-25 810
table中需要有个固定列，所以用了scroll属性，但是发现表格出现了一个空白列。原因：列都设置了固定宽度，导致所有的宽度加起来没有表格宽度长，会出现空白列。解决:建议至少留一个列不设宽度，以自适应宽度。
antdesignvue表格使用fixed出现空白列——已解决
King的博客
03-06 2021
【代码】antdesignvue表格使用fixed出现空白列——已解决。
解决antdesigntable表格fixed后出现空白列
淘淘小窝
07-22 2758
解决方案 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:
vue用ant design中table表格,点击某行时触发的事件操作
01-18
使用customRow 设置行属性，写对应事件 :customRow=”rowClick” 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record...
解决Ant-Design-vue(antdv)单独设置某个组件的样式,不污染全局(less预处理器)
qq_42292211的博客
09-17 2087
以表格(table)为例,我想只更改某个界面的表格头部颜色或者表格行间隙,行颜色等 一.加外层容器 首先找到此组件最近的一个外层容器,下面是一个最简单的示例 <div class='main-container'> <a-table/> </div> 此时table的外层容器为main-container,要想设置table内部的样式,只需要如下 .main-container{ //表格头部颜色 /deep/...
table添加一行且可编辑 vue_Vue使用AntDesign 表格可添加 可编辑行 可选择
weixin_39796116的博客
12-19 4364
Vue使用AntDesign 表格可添加 可编辑行 可选择使用的是这个进行修改的，这个是绑定的数组，多以直接在里面多加一行空数据就可进行编辑在中 只是多了一个添加的按钮添加:columns="columns":data-source="data"bordered>v-if="record.editable"style="margin: -5px 0":value="text"@change=...
java入职学习六之前端UI（element-ui,ant-design-vue）
Yzq12312的博客
12-12 859
一、element-ui 1.简介 element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 其设计原则为： 一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 反馈 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作； 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。 效率
antDesign----table表格fixed固定表头后缩放浏览器多出一列空列？
writeBUG123的博客
04-30 3393
浏览器百分百没问题 百分之80就多出来一列空白的 大佬们遇到过这样的问题嘛 请指教下小弟~~~ 表头代码如下：
antd表格固定列出现空白间隙问题
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-02 7049
前言： 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=[{.
解决Antd 表格固定列后列间有空白间隙的问题
徐行之的博客
01-16 1万+
问题描述： antd 表格设置列fixed属性，scroll为x:true后，如果列数少，会出现列间空白间隙。 原因： antd的表格为了实现固定列，横向滚动的效果，会多渲染出一个用于覆盖原始表格固定列的表格，该表格只渲染被固定的列，然后在横向滚动条滚动时，该表格固定不动，下面被覆盖的原始表格来回滚动，从而实现左右某些列固定，中间列可以滚动的效果。然后，在渲染时，两个表格固定列每一列的列宽度...
antd+vue表格固定列之后出现空白列-解决方案
qq_43437571的博客
09-16 5520
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:;"
antd Table 固定列空缺问题
qq_36800820的博客
11-15 3098
antd表格的固定列是用复制列然后覆盖在原表格上方实现的, 被固定的列此时还在原表格中, 但是被设置了隐藏 如果不给固定的列设置固定的宽度 就会导致两层列宽不一致, 上层列盖不住下面被隐藏的列的时候, 就会出现空缺 这时候可以设置visibility: visible;让下面的列显示出来填补空缺, 就不会影响视觉和点击等, 但是只能固定在左侧的列使用 .dataTable { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值