elementui table超出两行显示...鼠标已入tip显示

本文主要是介绍elementui table超出两行显示...鼠标已入tip显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

elementui el-table超出两行显示…鼠标已入tip显示

方式一

<el-table-column label="描述"prop="note"class-name="myNoteBox"><template slot-scope="scope"><!-- tips悬浮提示 --><el-tooltip placement="top"><div slot="content" class="table-tip-box" >{{ scope.row.text}}</div><div class="table-ellipsis">{{ scope.row.text}}</div></el-tooltip>  </template></el-table-column>

.table-ellipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;
}
// 提示框的最大宽度
.table-tip-box {max-width: 500px;
}

方式二

<el-table-columnv-if="false"label="描述"prop="note"class-name="myNoteBox"><template slot-scope="scope"> <el-popoverplacement="top-start" width="200"trigger="hover":content="scope.row.text"><div slot="reference" class="twoLineCls">{{ scope.row.text}}</div></el-popover> </template></el-table-column>

.twoLineCls {text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;
}

这篇关于elementui table超出两行显示...鼠标已入tip显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---