关于使用 ant-design-vue a-table 超出部分 隐藏并显示省略号

2024年1月27日 5次阅读 来源: 冰魂破

如果只是对于超出隐藏 可以直接使用  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;

 

 

    原文作者：冰魂破
    原文地址: https://blog.csdn.net/ks8380/article/details/115371348
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞