如何格式化基于 Tabulator SELECT 的标头过滤器选项？

我们正在使用制表符 (4.8.3)，并在一列上有一个基于 SELECT 的标题过滤器。除了我们尝试向某些选择选项添加一些格式之外，一切都很好。它们以预期的格式显示在选择下拉列表中。然而，一旦做出选择，所选文本就会以原始 html（未格式化）显示。

JS 小提琴here https://jsfiddle.net/q5tn724h/2/表明了我们的意思。进行选择并查看选择文本中显示的格式（例如粗体标签和不间断空格）。

我们在 Tabulator 中寻找 headerFilterFormatter 或类似的东西，但找不到任何东西。我们还看到了这个帖子：如何在制表器中创建多选标题过滤器？ https://stackoverflow.com/questions/60218807/how-do-i-create-a-multi-select-header-filter-in-tabulator，但仅仅为了清理选项文本显示而编写所有这些似乎有点矫枉过正。

我们不关心所选文本是否格式化，我们只是不希望 html 显示在值中。我们可以在每次做出选择时从外部对其进行清理，但这似乎不是一个好主意，因为它将紧密耦合所有内容。

有谁知道制表符中是否有一种快速、简单的方法来解决这个问题？

var table = new Tabulator("#table", {
  layout: "fitDataFill",
  columns: [{
      title: "ID",
      field: "id"
    },
    {
      title: "Topic",
      field: "topic",
      width: 120,
      headerFilterPlaceholder: "-- Select --", 
      headerFilter:"select", 
      headerFilterParams: {values: paramLookup}
    },
  ],
});

var tableData = [{
    id: 1001,
    topic: "1.0",
  },
  {
    id: 1002,
    topic: "1.1",
  },
  {
    id: 1003,
    topic: "2.0",
  },
  {
    id: 1004,
    topic: "3.0",
  },
];

function paramLookup(cell){
  return {
    "1.0":"<b>1.0</b>", 
    "1.1":"&nbsp;&nbsp;1.1",
    "2.0":"<b>2.0</b>", 
    "3.0":"<b>3.0</b>", 
  };
}

table.setData(tableData);

您面临的问题是您正在尝试为值数组中的选择列表值设置标签样式。选择编辑器使用输入元素来显示所选值，因此当您选择值时，它会将标签显示为文本。

正确的方法是在标签中包含实际值，然后使用列表项格式化程序根据需要格式化列表，这样您就可以根据标签存储纯文本值并将其显示为 html：

{
      title: "Topic",
      field: "topic",
      width: 120,
      headerFilterPlaceholder: "-- Select --", 
      headerFilter:"select", 
      headerFilterParams: {
          values: [1.0, 1.1, 1.2],
          listItemFormatter:function(value, title){ 
              return "<b>" + title + "</b>";
          },
      }
},