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-tooltip
            class="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>

效果