handsontable配置列筛选后，无法打开列筛选面板

问题

给HandsonTable实例开启filiter筛选后，点击列表头上的筛选下拉按钮，未显示筛选菜单面板。

原因

HandsonTable实例渲染在页面的Drawer抽屉中，筛选菜单面板被遮盖在第一层。

解决方案

调整筛选菜单面板层级，设置z-index为较大值9999。

完整代码

html

<hot-table :language="hotSettings.language" :settings="hotSettings" id="hotTable"></hot-table>

js

hotSettings: {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: 'Oct 11, 2023',
      sellTime: '01:23 AM',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: 'May 3, 2023',
      sellTime: '11:27 AM',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: 'Mar 27, 2023',
      sellTime: '03:17 AM',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: 'Aug 28, 2023',
      sellTime: '08:01 AM',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: 'Oct 2, 2023',
      sellTime: '01:23 AM',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      numericFormat: {
        pattern: '$ 0,0.00',
        culture: 'en-US',
      },
    },
    {
      title: 'Date',
      type: 'date',
      data: 'sellDate',
      dateFormat: 'MMM D, YYYY',
      correctFormat: true,
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'time',
      data: 'sellTime',
      timeFormat: 'hh:mm A',
      correctFormat: true,
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  licenseKey: licenseKey,
  colHeaders: true,
  rowHeaders: true,
  colWidths: 200,
  height: 350,
  autoWrapRow: true,
  autoWrapCol: true,
  // 启用列筛选
  filters: true,
  // 启用列菜单
  dropdownMenu: true,
},

css

.customFilterButtonExample1 .changeType {
  background: #e2e2e2 !important;
  border-radius: 100% !important;
  width: 16px !important;
  color: #0075ff !important;
  height: 16px !important;
  padding: 3px 2px !important;
  border: none !important;
}

.customFilterButtonExample1 .changeType::before {
  content: '▼ ';
  zoom: 0.9 !important;
}

.htDropdownMenu:not(.htGhostTable) {
  z-index: 9999;
}