Bootstrap 5 弹出窗口 html 内容

Question

我正在使用 Bootstrap 5 弹出窗口，它无法显示我需要的 HTML 内容。

我按照此链接作为解决方案：

如何在bootstrap 5 popover setAttribute()中添加html标签属性？

它适用于某些 HTML 属性，例如：

data-bs-content="<h1>Hello</h1>"

但是我需要显示的是一个表格：

<table>
<tr>
  <td>A班</td>
  <td>B班</td>
  <td>C班</td>
</tr>
<tr>
  <td>John</td>
  <td>Mary</td>
  <td>Joy</td>
</tr>

我的 HTML：

<button type="button" class="btn btn-lg btn-danger testing" data-bs-toggle="popover" 
data-bs-content ="
<table>
<tr>
  <td>A班</td>
  <td>B班</td>
  <td>C班</td>
</tr>
<tr>
  <td>John</td>
  <td>Mary</td>
  <td>Joy</td>
</tr>
    </table>
" 
title="Popover title"
data-bs-trigger="hover"
>Click to toggle popover</button>

还有 JavaScript：

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl,

   // options object as a second param
   {
      html: true
    }
  )
}) 

我错过了什么？ 如果我想在 data-bs-content 中使用表格，是否需要一些东西？

Answer 1

bootstrap 文档状态：

默认情况下，该组件使用内置的内容清理程序，它会删除任何未明确允许的 HTML 元素

这意味着您需要将所有表元素添加到允许列表中才能使其发挥作用。

示例：

const allowList = bootstrap.Popover.Default.allowList;
allowList.table = [];
// tbody and thead are needed since they're automatically added by the browser if not present
allowList.tbody = [];
allowList.thead = [];
allowList.td = [];
allowList.tr = [];

var popoverTriggerList = [].slice.call(
  document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(
    popoverTriggerEl,

    // options object as a second param
    {
      html: true,
      allowList: allowList,
    }
  );
});