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

最新推荐文章于 2023-03-06 22:24:36 发布
最新推荐文章于 2023-03-06 22:24:36 发布
阅读量4.7k 收藏 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、在这里插入图片描述

前端设计诗
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant-design-vue中将表格同一列内数据排序、数据相同的单元格合并
最新发布
06-08
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并； 包含原table数据排序，重组，行合并
antDesign----table表格fixed固定表头后缩放浏览器多出一列空列？
writeBUG123的博客
04-30 3282
浏览器百分百没问题 百分之80就多出来一列空白的 大佬们遇到过这样的问题嘛 请指教下小弟~~~ 表头代码如下：
antd+vue表格固定列之后出现空白列-解决方案
qq_43437571的博客
09-16 5315
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:;"
ant design Vue 固定列后出现空白列的情况（亲测可用）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
01-14 1205
当表格固定右侧列之后当表头过短时会出现空白列的情况，这个时候给表头数据的固定列加上固定宽度就解决了。
antdesignvue表格使用fixed出现空白列——已解决
King的博客
03-06 1358
【代码】antdesignvue表格使用fixed出现空白列——已解决。
解决Antd 表格固定列后列间有空白间隙的问题
徐行之的博客
01-16 1万+
问题描述： antd 表格设置列fixed属性，scroll为x:true后，如果列数少，会出现列间空白间隙。 原因： antd的表格为了实现固定列，横向滚动的效果，会多渲染出一个用于覆盖原始表格固定列的表格，该表格只渲染被固定的列，然后在横向滚动条滚动时，该表格固定不动，下面被覆盖的原始表格来回滚动，从而实现左右某些列固定，中间列可以滚动的效果。然后，在渲染时，两个表格固定列每一列的列宽度...
antd表格固定列出现空白间隙问题
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-02 6372
前言： 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 table出现空白列的问题
youzigrowing的博客
11-24 1846
antd table出现空白列的原因及解决方法
ant design vue table 固定列后出现空列
weixin_38673922的博客
03-04 1390
解决办法：给固定列添加宽度
ant-design-vue 实现表格内部字段验证功能
10-15
主要介绍了ant-design-vue 实现表格内部字段验证功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
$ npm install @ant-design/dark-theme 用法 import darkTheme from '@ant-design/dark-theme' ; // webpack.config.js: less-loader { loader : 'less-loader' , options : { modifyVars : darkTheme , } , } ,...
解决ant-design-vue中menu菜单无法默认展开的问题
01-18
在ant-design-vue的文档中， menu有两个可以传的参数，分别为defaultOpenKeys和openKeys，但在接手做一个项目时，openKeys这个参数前人已经写了，可能是从文档中直接复制demo没有删除掉，我也没去管。 等到需要用到...
Ant Design Vue2 表格实现可拖动的伸缩列,阻止拖动后排序
Onelizi的博客
08-18 1684
Ant Design Vue2 表格实现可拖动的伸缩列
Vue2 + ant design vue1.7.8版本 Table组件 手动拖拽、可伸缩列功能
weixin_41832038的博客
08-26 4050
Vue2 手写实现ant design vue 1.7.8低版本 table组件的列拖拽、可伸缩列的功能
Ant Design of Vue Table 表格可伸缩列 -- 排坑指南
qq_39075021的博客
10-30 5917
最近在用 ant-design-vue 开发项目时遇到一个表格列需要支持拖拽改变宽度，这个功能在 element-ui上直接可以使用，但 ant-design-vue 需要引用一个叫 vue-draggable-resizable 的插件才能实现，接着安装了 vue-draggable-resizable 2.2.0版本，本以为很简单照着官网写即可，没想到官网的demo在本地一直报错： 网上搜了一大堆也没有解决，最终在github上找到了一个解决方案，官网的实例可以复制过来使用，但需要进行改造： Res
解决antdesigntable表格fixed后出现空白列
淘淘小窝
07-22 2596
解决方案 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出现空白列问题解决
我还可以
03-08 1475
引发这种问题有两个原因： 列太少，而且设置了宽度 设置了固定头部或者尾部 解决： 删除width属性和fixed属性
React-antd日期选择框日期初始化问题(invalid date)解决
热门推荐
WebView
04-09 1万+
1、 2、在使用日期选择框的时候，当我们没有进行初始化，并格式化日期时，会出现以下情况 3、解决方法: 在state初始化时给予日期值为undefined 在日期选择框中进行判断 <DatePicker style={{ width: '110px' }} placeholder="开始日...
Ant-Design-Vue表格单元格背景色设置并且前三列不设置
05-27
如果你想在Ant-Design-Vue表格中设置单元格的背景色，可以使用`customRender`属性来自定义单元格的渲染方式，具体可以参考以下代码： ```html <template> <a-table :columns="columns" :data-source="data"> <template slot="name" slot-scope="text, record"> <span :style="{backgroundColor: record.color}">{{text}}</span> </template> </a-table> </template> <script> export default { data() { return { columns: [ { title: "Name", dataIndex: "name", key: "name", customRender: (text, record, index) => { if (index > 2) { return <span :style="{backgroundColor: record.color}">{text}</span>; } else { return text; } }, }, { title: "Age", dataIndex: "age", key: "age", }, { title: "Address", dataIndex: "address", key: "address", }, ], data: [ { key: 1, name: "John Brown", age: 32, address: "New York No. 1 Lake Park", color: "#f0f0f0", }, { key: 2, name: "Jim Green", age: 42, address: "London No. 1 Lake Park", color: "#f0f0f0", }, { key: 3, name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park", color: "#f0f0f0", }, { key: 4, name: "Jim Red", age: 32, address: "London No. 2 Lake Park", color: "#f0f0f0", }, { key: 5, name: "Jake White", age: 32, address: "Dublin No. 2 Lake Park", color: "#f0f0f0", }, ], }; }, }; </script> ``` 在上述代码中，我们通过`customRender`方法来自定义单元格的渲染方式，并且在前三列不设置单元格的背景色。具体实现中，我们在`customRender`方法中判断当前单元格的索引是否大于2，如果是，则渲染带有背景色的`span`标签，否则直接返回文本。同时，我们在模板中使用`slot`以及`slot-scope`属性来渲染自定义单元格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值