el-table單元格換行顯示，超出部分省略號

實際開發中，會遇到表格的內容太長了，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;
}