如何使VuetifyJS中数据表的扩展槽中的内容可供搜索？

<template v-slot:item.actions="{ item }">
  <div id="searchable-slot">
    <!-- 扩展槽的内容 -->
  </div>
</template>

mounted() {
  this.$nextTick(() => {
    const slots = document.querySelectorAll('#searchable-slot');
    slots.forEach(slot => {
      // 将扩展槽的内容转换为可搜索的内容
      const searchableContent = slot.innerText.toLowerCase();
      // 添加搜索功能，例如使用input事件监听输入框的变化
      const searchInput = document.getElementById('search-input');
      searchInput.addEventListener('input', () => {
        const searchText = searchInput.value.toLowerCase();
        if (searchableContent.includes(searchText)) {
          slot.style.display = 'block';
        } else {
          slot.style.display = 'none';
        }
      });
    });
  });
}