Element Plus的el-table表格中单元格内容过多显示省略号

1、el-table表格中内容超出单元格的宽度会自动换行,会使整个表格看起来显得不太美观,此时可以使用el-table-column 自带的 show-overflow-tooltip="true"  属性来设置,可以使超出单元格宽度的内容变成省略号,而且鼠标放上去会提示单元格中原本有的全部的内容,但是这种方法只能查看,无法复制完整的内容。



3、如果想要实现超出单元格内容既能够显示出完整的内容,又想要能够复制全部内容,可以使用插槽,设置el-tooltip来提示,如下图所示:


    

但有时候可能因为电脑分辨率的原因,单元格中所截取的显示的内容会不太合适,也可以手动写一个css样式,来实现溢出显示省略号

:deep(table tr span.el-tooltip__trigger) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

你可能感兴趣的:(elementui)