EL-TABLE中超出顯示省略號,HOVER顯示所有且可復制(EL-POPOVER和EL-TOOLTIP)

其實table里有個屬性show-overflow-tooltip,可以實現超出顯示省略號,但是hover的時候不好復制,所以考慮別的方式
elementui提供了2種方式:

 

 

 

 實現代碼如下:
el-tooltip

<el-table-column label="請求數據" width="300px"> <template slot-scope="scope"> <el-tooltip class="item" effect="light" :content="scope.row.reqData" placement="top-start"> <div slot="content" style="width: 300px;">{{scope.row.reqData}}</div> <div class="btn">{{scope.row.reqData}}</div> </el-tooltip> </template> </el-table-column>

 el-popover

<el-table-column label="返回數據" width="300px"> <template slot-scope="scope"> <el-popover width="250" placement="top-start" trigger="hover" :content="scope.row.respData"> <span slot="reference" class="btn">{{ scope.row.respData }}</span> </el-popover> </template> </el-table-column>

 

附加：如何修改el-tooltip彈框的寬度

// 設置el-tooltip寬度
.el-tooltip__popper {
max-width: 500px;
line-height: 20px;
}

.btn {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}