关于使用 ant |
您所在的位置:网站首页 › 单元格内容自动隐藏 › 关于使用 ant |
如果只是对于超出隐藏 可以直接使用 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 |