实现效果：
代码：
后端返回数据格式：
<el-table-column :label="$t('SMD_CL.desc')">
<template slot-scope="scope">
<el-tooltip placement="top">
<div
v-html="toBreak(scope.row.barcode.describe)"
slot="content"
></div>
<span class="overSP">
{{ scope.row.barcode.describe }}
</span></el-tooltip
>
</template>
</el-table-column>
方法：
// 描述信息
toBreak(val) {
if (val) {
return val.split("\n").join("<br/>");
}
},
css：
.overSP {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; /*可以显示的行数，超出部分用...表示 */
-webkit-box-orient: vertical;
}
原理：
1.在el-tooltip 使用slot=“content”
2.定义分割字符串实现换行的方法
3.在slot=“content”使用v-html嵌入处理后的字符串
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79284.html
