我如何使此表头内部的下拉列表在B表中工作

Question

我有一个b表，我试图将其表头转换为拆分按钮，其中按钮的左侧部分可以对行进行排序，而按钮的右侧部分具有下拉列表。这是一张图像，显示我正在尝试实现的目标

我的问题是下拉列表根本没有打开。如何单击标题时如何打开无序列表而不是对行进行排序

<b-table :fields="columnDefinitions" :items="rows">
  <template slot="HEAD_name" slot-scope="data">
    <div class="btn-group d-flex">
      <button type="button" class="btn btn-light w-100 btn-sort">
        <i class="fa fa-sort-up"></i>
        <span>{{data.label}}</span>
      </button>
      <button
        type="button"
        class="btn btn-light dropdown-toggle dropdown-toggle-split"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        <i class="fa fa-filter"></i>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right">
        <form class="px-4 py-3">
          <div class="form-group">
            <select class="custom-select filter-options">
              <option value="1" selected>Above</option>
              <option value="-1">Below</option>
              <option value="0">Equal</option>
              <option value="2">Between</option>
            </select>
          </div>
        </form>
      </ul>
    </div>
  </template>
</b-table>