eltable单元格换行显示,超出部分省略号

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

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

如下图所示:

 

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

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

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

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

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

  <el-table-column  prop="address" label="地址">
       <template slot-scope="scope">
          <el-tooltip :content="scope.row.address" placement="top">
            <p class="descStyle">{{ scope.row.address }}</p>
          </el-tooltip>
        </template>
  </el-table-column>
.descStyle {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; //行数
  -webkit-box-orient: vertical;
}

原文地址:https://www.cnblogs.com/jiayuexuan/p/15699398.html