如何为Tabulator表格添加带输入过滤的下拉列过滤器

直接用Tabulator的自定义表头过滤器就能实现，不用纠结官方现成方案，自己写个组件就行，步骤如下：

1. 自定义过滤器的HTML结构 #

先写个包含输入框和下拉的模板，用来嵌入到表头里：

<div class="custom-dropdown-filter">
  <input type="text" class="filter-input" placeholder="输关键词筛选">
  <select class="filter-select" multiple></select>
</div>

2. 编写过滤器逻辑代码 #

这个函数既要完成组件初始化，也要处理表格的过滤判断：

function customDropdownFilter(cell, value, params) {
  // 首次渲染时创建过滤器组件
  if (!cell.getElement().querySelector(".custom-dropdown-filter")) {
    const filterContainer = document.createElement("div");
    filterContainer.className = "custom-dropdown-filter";
    filterContainer.innerHTML = `
      <input type="text" class="filter-input" placeholder="输入筛选">
      <select class="filter-select" multiple></select>
    `;
    cell.getElement().appendChild(filterContainer);

    const input = filterContainer.querySelector(".filter-input");
    const select = filterContainer.querySelector(".filter-select");

    // 渲染传入的下拉选项
    params.options.forEach(opt => {
      const option = document.createElement("option");
      option.value = opt.value;
      option.textContent = opt.label;
      select.appendChild(option);
    });

    // 输入框实时过滤下拉选项
    input.addEventListener("input", (e) => {
      const keyword = e.target.value.toLowerCase();
      Array.from(select.options).forEach(opt => {
        opt.style.display = opt.textContent.toLowerCase().includes(keyword) ? "" : "none";
      });
      // 触发表格重新执行过滤
      table.setFilter();
    });

    // 下拉选项变更时触发过滤
    select.addEventListener("change", () => {
      table.setFilter();
    });

    // 存下下拉元素，方便后续过滤判断使用
    cell._filterSelect = select;
  }

  // 表格数据的过滤判断逻辑
  const select = cell._filterSelect;
  const selectedValues = Array.from(select.selectedOptions).map(opt => opt.value);
  if (selectedValues.length === 0) return true; // 未选中任何值时不过滤
  return selectedValues.includes(value);
}

3. 配置Tabulator列 #

在列定义里调用这个自定义过滤器，记得传入下拉选项数组：

const table = new Tabulator("#example-table", {
  columns: [
    {
      title: "分类",
      field: "category",
      headerFilter: customDropdownFilter,
      headerFilterParams: {
        options: [
          {value: "tech", label: "科技"},
          {value: "life", label: "生活"},
          {value: "sport", label: "运动"},
          // 可按需添加更多选项
        ]
      }
    },
    // 其他列按需配置
  ],
  // 表格其他配置项...
});

4. 样式优化（可选） #

给过滤器加些基础样式，适配表头布局：

.custom-dropdown-filter {
  position: relative;
}
.custom-dropdown-filter .filter-input {
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
}
.custom-dropdown-filter .filter-select {
  width: 100%;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
}

额外提示 #

• 如果下拉选项需要从表格数据源动态提取，先遍历数据去重生成options数组即可
• 不需要多选的话，删掉select标签的multiple属性，再调整过滤逻辑判断单个值
• 输入框可以加防抖函数，避免输入时频繁触发过滤，提升性能

内容的提问来源于stack exchange，提问作者Brunda Shetty