el-table-column show-overflow-tooltip 只能显示纯文本，无法渲染 ＜p＞ 标签

富文本输入内容

使用el-table-column 默认的show-overflow-tooltip

• **el-table-column** 中显示内容时，鼠标悬浮显示多行 HTML 文本。默认的 show-overflow-tooltip 只能显示纯文本，无法渲染 <p> 标签。

<el-table-column label="文案" :show-overflow-tooltip="true" align="center" prop="content" />

解决方案

• 需要自定义 tooltip。

      <el-table-column label="文案" align="center" prop="content"><template #default="scope"><el-tooltipclass="item"effect="dark"placement="top-start"popper-class="custom-tooltip":disabled="!scope.row.content"><!-- 显示的表格内容（纯文本） --><!-- 表格里只显示一行，超出省略 --><span class="text-ellipsis" style="display: inline-block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ scope.row.content.replace(/<[^>]+>/g, '') }}</span><!-- tooltip 的内容使用 slot --><template #content><div v-html="scope.row.content"></div></template></el-tooltip></template></el-table-column>

效果