antd中使用Table组件,设置ellipsis: true后；结果宽度不起作用了

最新推荐文章于 2024-04-12 17:55:34 发布
最新推荐文章于 2024-04-12 17:55:34 发布
阅读量5.3k 收藏 4
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fs670267542/article/details/123628887
版权
本文讲述了在使用表格时遇到的问题，即设置了宽度限制和ellipsis属性后内容仍撑开宽度。作者分享了通过onCell()函数添加样式解决的方法，包括maxWidth、overflow、whiteSpace和textOverflow等技巧。
摘要由CSDN通过智能技术生成

我设置width应该是这么宽,结果设置了 ellipsis: true 后,这个宽度就不生效了,被内容撑开了

解决办法:onCell: () => {
      return {
        style: {
          maxWidth: 160,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow:'ellipsis',
          cursor:'pointer'
        }
      }
    },

把这一串加到需要处理的列中

附上我的代码截:

 

 

 此时宽度就不会被撑开了.

做外包的那些年
关注
移动端中使用el-menu导致ellipsis属性失效(或者在IOS下失效)
qq_20751269的博客
08-31 941
移动端中使用el-menu导致ellipsis属性失效(或者在IOS下失效)
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
weixin_42332910的博客
01-16 2065
1、固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在，反正3.16.2版本是存在这个问题的，若是是3.24.0以前的版本估计只能经过修改css样式解决。css按照官网说的：react一、若列头与内容不对齐或出现列重复，请指定固定列的宽度width。若是指定width不生效，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。git二、建议指定...
antd中使用Table组件,设置ellipsis: true后；结果宽度不起作用原因：超长连续字段（长数字和长单词） 破坏表格布局的问题（即使你指定了列的宽度也会被挤开），
dggggggx的博客
11-02 2150
antd中使用Table组件,设置ellipsis: true后；结果宽度不起作用原因：超长连续字段（长数字和长单词） 破坏表格布局的问题（即使你指定了列的宽度也会被挤开），
CSS---text-overflow: ellipsis无效问题
JamieCheung的专栏
08-31 4048
.groupNickname { width: 1.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 必须配合overflow: hidden; 和 white-space: nowrap;使用才有效。
antd vue table ellipsis属性不生效
Admin_yws的博客
04-27 4152
//ellipsis: true不生效代码 <a-tooltip slot="status" slot-scope="text" placement="top" :title="text" :arrow-point-at-center="true" > <div>{{ text }}</div> </a-tooltip> //将div改
antdv ellipsis 没有作用
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
05-20 4923
antdv 的 Table表格 碰到的问题 table表格中同时使用fixed和ellipsis会造成固定列的内容溢出宽度时，会直接撑开设定的宽度，ellipsis不生效。 并且每一列的ellipsis设置都将不起作用，固定列撑开的宽度会覆盖没有设置固定列的表头， 方法 根据api插槽自定义内容标签，然后给标签添加类名， 内容溢出的css样式 三行 columns中还是要设置宽度的 代码： <a-table ref="table" size="middle"
vue2a-table的ellipsis: true,属性不生效
最新发布
m0_65360496的博客
04-12 537
vue2a-table的ellipsis: true,属性不生效解决方法
table的Column的ellipsis属性
weixin_45348207的博客
06-20 1541
Antd的table超出父元素宽度
antd Table组件ellipsis: true 不显示省略号
answercc的博客
11-27 6651
antd Table组件ellipsis: true 不显示省略号 render dom 元素的时候不要用块级元素(div) 要用 行内元素(span)
vue3+antd的table小组件
lbchenxy的博客
05-06 1629
antdtable组件支持增加搜索栏配置。增加按钮等操作。 闲话少叙，上代码 <!-- 更多与收起详见用户管理页面 --> <template> <div class="c-data-table"> <a-spin :spinning="spinning"> <a-card :title="title" :bordered="false"> <div class="dt-search" v-if="$s
vue+antd使用a-table实现表格中的数据换行显示
w的博客
02-18 6950
效果： table中换行显示 代码： table如常写： <a-table :columns="columns" :data-source="data" row-key="id"></a-table> columns中要换行显示的列添加customRender： columns: [ { title: '问题', dataIndex: 'question', ellipsis: true, // 超过宽度将自动省略 }, { title: '答案', da
vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式
热门推荐
XSL_HR的博客
12-25 1万+
利用ant design vue组件库内置的API属性（rowClassName）给table表格添加行样式。利用css的不可控操作，去除表格的斑马纹样式。
React(hook)基于antd Table实现可拖拽调整列宽的表格
weixin_38884718的博客
03-29 6610
React基于antd Table实现可拖拽调整列宽的表格 前言        在日常的工作开发中，会经常的用到表格，进行数据展示，但是数据的长度不一，初始设置的表格列宽不一定符合数据的展示要求，故有时需要手动的进行表格列宽的调整。        用过antd的童鞋，都知道antd的表格并不支持列拖拽功能；那么在react+antd的项目中如何实现可拖动表格呢？ 实现功能 1：表格列宽初始自动分配、列宽总和不能超过容器宽度（无
ellipsis在table里失效
两只鱼，鱼鱼鱼鱼鱼
07-05 2906
问题：display：table，或者table标签布局之后，设置td（table-cell）文字溢出隐藏ellipsis失效 解决方法： 在table（display：table）的css样式中设置:table-layout:fixed; 在table td 的css样式中设置：overflow:hidden;text-overflow:ellipsis;即可 出现频率太高，遗忘太快。 ...
ant-design-vue3的table使用总结
学习使我快乐_玉祥
09-12 8908
根据windows文件管理器，我们肉眼可见需要四个字段：name文件名、type文件类型、update修改日期、size大小[{title: '名称',},{width: 220,title: '修改日期', dataIndex: 'date',key: 'date',ellipsis: true, resizable: true,},{title: '类型',},
antdVue表格Ellipsis溢出高亮
weixin_45549650的博客
12-07 1935
ant desigin vue的表格有一个属性Ellipsis是可以支持溢出自动省略，然后鼠标移到字体上可以显示省略的内容。不过由于该属性暴露的可修改内容太少，即该表格是什么内容，显示的就是什么内容，这样如果表格内的内容是有html的标签，显示省略的内容也会有html标签。而不会进行html渲染。 本问的效果图 vue插件内容 <template> <a-tooltip :overlayClassName='overlayClassName' trigger='hover'>
关于VUE使用antD table组件设置fixed和ellipsis无效问题
三包酸奶！的博客
10-26 2877
创建新的less文件(需要在组件中引入该less文件)或在antD设置全局样式的less文件中添加如下样式： .ant-table-fixed-left table,.ant-table-fixed-right-right table{ width:min-content; }
JS：表格宽度在设置ellipsis:true后无效
Patrickstar001的博客
08-29 427
js小技巧
ant design的table表格columns设置fixed之后ellipsis和width无法生效问题
qq_38432842的博客
08-03 1072
ant design组件库使用过程中遇到的问题
vue antd table设置 sorter: true，导致表头高度不一致
07-12
你好！对于Vue Antd中的表格组件，当设置sorter为true时，可能会导致表头高度不一致的问题。这是因为当排序功能开启时，表头会显示排序图标，而排序图标会占据一定的高度，从而导致表头的高度不一致。 解决这个问题的方法是使用自定义表头的方式，通过自定义表头的样式来控制高度。你可以通过以下步骤来实现： 1. 首先，在表格组件中设置sorter为true，开启排序功能。 2. 然后，在自定义表头的样式中，给表头设置一个固定的高度，例如： ```css .custom-header { height: 50px; } ``` 3. 最后，在表格组件中使用自定义表头，并添加自定义表头的类名，例如： ```html <template> <a-table :columns="columns" :data-source="data"> <template slot="title"> <div class="custom-header"> {{ columns[0].title }} </div> </template> </a-table> </template> ``` 通过以上步骤，你可以自定义表头的高度，从而解决表头高度不一致的问题。希望对你有所帮助！如果还有其他问题，请随时提问。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值