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;

}