如果只是对于超出隐藏 可以直接使用  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) => <a-tooltip placement="topLeft" title = {record.create_at} >{record.create_at}</a-tooltip>
}

]

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

{
  id: "1",
  checked:true,
  title: '账单编号',
  dataIndex: 'bill_number',
  width: 120,
  fixed: 'left',
  customRender: (text) => <span class="col-sql" title= {text}>{text}</span>,
}

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

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

Logo

前往低代码交流专区

更多推荐