a-table固定了最后一列，导致的多余一列，解决表头过少宽度没用完的情况

最新推荐文章于 2024-07-31 17:23:18 发布
最新推荐文章于 2024-07-31 17:23:18 发布
阅读量1.5k 收藏 2
点赞数 1
文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45827043/article/details/125991398
版权
在 Vue 应用中遇到a-table组件的问题，当表头(column)数量较少时，表格出现多余一列。通过判断后端传来的动态表头长度，如果超过5个则固定操作列，否则不固定，从而有效解决了宽度未充分利用的问题，实现了完美效果。
摘要由CSDN通过智能技术生成

问题描述：

需求：用户会根据需要设置表头，表头是动态的，表头多的时候正常滚动，表头少的时候，宽度没用完，多出一列
在这里插入图片描述
正常情况：
在这里插入图片描述

解决方案：

判断后端传来的动态表头column，length超过5就固定操作列，不超过就不固定列，成功解决！！！！

 this.columns.push({
   
            id: 4
最低0.47元/天 解锁文章
不爱学习的黑猫
关注
使用Ant Design的Table表格最后一列固定（fixed）出现重复
04-12 1万+
操作列右侧固定。在列很少情况下出现重复问题 对于没有bordered边框解决方案 { title: '编号', dataIndex: 'id', sorter: true, width: 100, align: 'left', render: text => text || '-' }...
解决antd 2.x table组件columns fixed后列表头多出一块的问题
he_web369的博客
12-04 1916
解决antd 2.x table组件columns fixed后列表头多出一块的问题 操作栏重复渲染使样式难看。 columns里的操作栏代码： { title: `操作`, key: 'operation', render: (text, record) => { return <DropOption onMenuClick={e => this.handleMenuClickCh
Vue开发学习笔记:a-table组件设置固定宽度,同时保持列自适应
最新发布
JustWantToFly的博客
07-31 434
Vue开发学习笔记:a-table组件设置固定宽度,同时保持列自适应
【ant-design-vue】 a-table表头多出来一个空列
piano_diano的博客
03-11 2952
背景 原因 scroll 的 x 设置的长度太长了 <a-table ref="table" size="middle" bordered :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" .
antDesign----table表格fixed固定表头后缩放浏览器多出一列空列？
writeBUG123的博客
04-30 3374
浏览器百分百没问题 百分之80就多出来一列空白的 大佬们遇到过这样的问题嘛 请指教下小弟~~~ 表头代码如下：
table 最后一行固定
qq_45823368的博客
05-04 309
bottom: 0;
antd table 多级表头添加合计行，并固定在最后一行
欲掩不从心
05-13 3408
/** * @param {table列} columnsData * @param {table的数据} data * @param {返回带总计行} callback */ export function totalColumns (columnsData, data, callback) { var totalColumns = {} columnsData.some((item, index) => { var s = data.reduce((sum, current
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 2349
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
2021前端面经-看这篇就够了（笔者靠这个拿到阿里和字节的offer）
爱前端也爱恋爱
04-30 1849
面试题梳理 梳理前端常见面试题及答案。 一、web 前端性能优化 性能评级工具（PageSpeed 或 YSlow） css CSS优化、提高性能的方法有哪些 多个css合并，尽量减少HTTP请求 将css文件放在页面最上面 移除空的css规则 避免使用CSS表达式 选择器优化嵌套，尽量避免层级过深 充分利用css继承属性，减少代码量 抽象提取公共样式，减少代码量 属性值为0时，不加单位 属性值为小
Windows程式开发设计指南（十六）调色盘管理器
梦想起飞的地方
10-06 1551
16. 调色盘管理器 如果硬体允许，本章就没有存在的必要。尽管许多现代的显示卡提供24位元颜色（也称「true color」或「数百万色」）或16位元颜色（「增强色」或「数万种颜色」），一些显示卡－尤其是在携带型电脑上或高解析度模式中－每个图素只允许8位元。这意味著仅有256种颜色。 我们用256种颜色能做什么呢？很明显，要显示真实世界的图像，仅16种颜色是不够的，至少要使用数千或数百万种颜色
PL/0语言编译程序分析
李凡希的Blog
08-15 1万+
　　PL/0语言是Pascal语言的一个子集，我们这里分析的PL/0的编译程序包括了对PL/0语言源程序进行分析处理、编译生成类PCODE代码，并在虚拟机上解释运行生成的类PCODE代码的功能。　　PL/0语言编译程序采用以语法分析为核心、一遍扫描的编译方法。词法分析和代码生成作为独立的子程序供语法分析程序调用。语法分析的同时，提供了出错报告和出错恢复的功能。在源程序没有错误编译通过的情况下，调用
table 固定表头
weixin_51666715的博客
03-16 1473
可以直接通过给组件一个最大高度然后通过穿透获取thead使用·position:sticky·固定头部即可。
a-table固定住前几列数据不受横向滚动条的影响
Alice_LiLi的博客
09-16 872
columns中加上属性：fixed: ‘left’;若是想固定住后几列则： fixed: ‘right’
Ant Design Vue（a-table）固定表头三行代码
chenmomo_csdn的博客
10-18 530
第二步就是通过类名粘性定位控制。
vue2+ant-design-vue a-table滚动鼠标时固定表头
zhongxiajiu的博客
07-19 1070
【代码】vue2+ant-design-vue a-table滚动鼠标时固定表头。
vue3中a-table使用sortablejs设置了列拖动时，固定列处理
小白成长记
07-16 401
在a-table中，如果设置了列可以拖动位置，在有固定列时，固定列应该是不可以拖动的，可以拖动的列也不能拖动到固定列的位置。
ant design vue a-table 表头和内容不对齐，一行代码解决问题
陈新科的博客
11-24 3663
动态设置x轴的长度就可以了，有几列表头就设置成百分之几，完美~ <a-table :columns="columns" :data-source="data" size="small" :loading="loading2" :scroll="{ x: `${columns.length}0%`, y: 400 }"//关键代码 > ...
使用ant design的table控件最后一列固定（fixed）遇到不渲染的问题
热门推荐
小叶子的博客
12-15 2万+
工作以来一直在做2b的项目，因此表单操作，权限设置，一些业务逻辑就做的比较多。 首先介绍下背景：前后端完全分离，前端技术栈使用react+redux+antd，经常是没有视觉设计，全凭产品需求文档··_··！最近产品来了个需求，需要做一个流程图，在流程图上点击文字时需要弹窗显示数据，因此渣渣一个需求里做了n个弹窗，弹窗上再弹窗。。。。。（心里无数XXX奔过），因此也遇到了不少的问题，流程图是个大模...
el-table 固定第一列
12-14
为了固定el-table的第一列，可以使用el-table-column的fixed属性。将第一列的fixed属性设置为left即可实现固定第一列的效果。以下是一个示例代码： ```html <el-table :data="tableData"> <el-table-column ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值