欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ant Design 表格table 内容超出 溢出、隐藏 、截断

程序员文章站 2022-05-13 21:38:29
...
首先表格要定义上宽度
{
  title: '内容',
  align: 'center',
  dataIndex: 'contents',
  width:'45%',
  //这里使用插槽
  scopedSlots: { customRender: 'titleShow' },
},

不可以使用span标签

我使用的是div标签

title是用来鼠标悬停进行全部内容显示

<div :title="record.contents" :style="{maxWidth: '600px',whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden', wordWrap: 'break-word', wordBreak: 'break-all' }" slot="titleShow" slot-scope="text, record">
    {{record.contents}}
</div>

重要样式设置需要设置宽度

:style="{maxWidth: '600px',whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden', wordWrap: 'break-word', wordBreak: 'break-all' }"
相关标签: Ant Design