在嵌套的 JS 对象数组中搜索 v-treeview

Question

我正在尝试为我的 Vuetify v-treeview 组件实现一个搜索功能，它使用一个过滤器函数，用于嵌套的 JS 对象数组，看起来像。

[
   {
      Name: 'Name Level 1',
      Title: 'Title Level 1',
      children: [
         {
            Name: 'Name Level 2',
            Title: 'Title Level 2',
            children: [ ... ]
         }
      ]
   },
...
]

现在我有一个文本字段，可以对搜索进行 v-models，还有一个过滤功能，看起来像 Bara Koc 评论中的那个。

filter () {
      return (item, search, textKey) => {
        let result = []
        const _filter = (item, search, textKey) => {
          for (const leaf of item) {
            if (leaf[textKey].indexOf(search) !== -1) {
              result = [...result, { Name: leaf.Name, Title: leaf.Title }]
            }
            if (leaf.children) {
              return _filter(leaf.children, search, textKey)
            } else {
              return null
            }
          }
        }
        _filter(item, search, textKey)
        return result
      }
    }

v-treeview 看起来像

<v-treeview
      :items="treeItems"
      :search="search"
      :filter="filter"
      :open.sync="open"
      item-key="Name"
      dense
      style="max-height: 700px;"
      class="overflow-y-auto overflow-x-auto"\>

search is v-modelto av-text-field` 作为要搜索的字符串，但出现以下错误。

vue.runtime.esm.js?5eb8:1888 TypeError: Invalid attempt to iterate non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

Answer 1

您可以通过递归函数遍历树。您可以将数据结构视为 M 树。我也使用闭包进行数据封装。

const data = [
   {
      Name: 'Name Level 1',
      Title: 'Apple',
      children: [
         {
            Name: 'Name Level 2',
            Title: 'Title Level 2',
            children: [{
              Name: 'Name Level 3',
              Title: 'Application',
              children: null
            }]
         }
      ]
   },
   {
      Name: 'Name Level 1',
      Title: 'Apple',
      children: null
   }
]

const filter = (item, search, textKey) => {
  let result = []
  const _filter = (item, search, textKey) => {
    for (const leaf of item) {
      if (leaf[textKey].indexOf(search) !== -1) {
        result = [...result, {Name: leaf.Name, Title: leaf.Title}]
      }
      leaf.children ? _filter(leaf.children, search, textKey) : null
    }
  }
  _filter(item, search, textKey)
  return result
}

console.log(filter(data, 'App', 'Title'))