el-table单元格换行显示,超出部分省略号


实际开发中,会遇到表格的内容太长了,elementui中的表格,会进行自动换行处理;

此时表格的高度就会发生变化 这样就不美观。

如下图所示:

 

解决方法1:超出部分用省略号显示

el-table是有这个控制属性的 :show-overflow-tooltip=“true”(超出一行显示省略号)

column
        prop="address"
        label="地址"
        show-overflow-tooltip  
/el-table-column>

存在问题:show-overflow-tooltip可以实现省略号,但是只能单行显示,不能换行。

解决方法2(推荐): 借助插槽和el-tooltip去实现

  
       
  
.descStyle {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; //行数
  -webkit-box-orient: vertical;
}

js