关于使用 ant

您所在的位置:网站首页 单元格内容自动隐藏 关于使用 ant

关于使用 ant

2024-07-13 15:25| 来源: 网络整理| 查看: 265

如果只是对于超出隐藏 可以直接使用  ellipsis 进行设置,方便快捷

columns = [ { id: "1", checked:true, width: 100, title: '更新时间', dataIndex: 'update_at', ellipsis: true, } ]

但有的时候 title的hover显示效果 满足不了我们的 需求 , 要求我们使用类似于tooltip的形式  对省略的字段进行显示   代码如下:

columns = [ { id: "1", checked:true, width: 100, title: '更新时间', dataIndex: 'update_at', customCell : () => { return { style: { width: '100px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow:'ellipsis', cursor:'pointer' } } }, customRender: (text,record) => {record.create_at} } ]

但是对于某些列表项,设置 fixed后,发现直接使用   ellipsis: true,  已经不起作用了,代码如下:

{ id: "1", checked:true, title: '账单编号', dataIndex: 'bill_number', width: 120, fixed: 'left', customRender: (text) => {text}, }

自定义渲染内容,并且设置class样式,尤其注意的是,样式必须添加宽度,原因有可能是:ant的tb的display为table-cell,可能是导致white-space:nowrap宽度失效的原因。所以这里需要设置一个宽度定值。

overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; width: 100px;



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3