Фильтр по вложенным (рекурсивным) данным (Vue 2) - PullRequest
Новая
       26

Фильтр по вложенным (рекурсивным) данным (Vue 2)

2 голосов
/ 05 марта 2019

Вот пример моих данных JSON: 

"data":[  
  {  
     "id":01,
     "name":"test",
     "parent_id":null,
     "children":[  
        {  
           "id":15,
           "name":"subChild",
           "parent_id":21,
           "children":[  
              {  
                 "id":148,
                 "name":"subSubChild",
                 "parent_id":22,
                 "children":[  
                        ....
                 ]
              }
           ]
        }
     ]
  },

Я бы хотел отфильтровать этот уровень по уровню. Я сделал этот метод: 

computed: {
      filteredData: function () {
        let filterData = this.filter.toLowerCase()
        return _.pickBy(this.data, (value, key) => {
          return _.startsWith(value.name.toLowerCase(), filterData)
        })
      },

Это работает только для первого "уровня", и я попробовал несколько решений, но ни одно не помогло детям.

Итак, я бы хотел иметь возможность фильтровать по нескольким уровням.

Если у вас есть идея! Спасибо

1 Ответ

1 голос
/ 05 марта 2019

Для этой конкретной цели может пригодиться рекурсивная функция.

Попробуйте следующий подход, и для лучшего просмотра нажмите на ссылку Full page рядом с кнопкой Фрагмент кода запуска внизу. 

new Vue({
  el: '#app',

  data() {
    return {
      filter: '',
      maintainStructure: false,
      data: [{
        "id": 01,
        "name": "test",
        "parent_id": null,
        "children": [{
          "id": 15,
          "name": "subChild",
          "parent_id": 21,
          "children": [
            {
              "id": 148,
              "name": "subSubChild",
              "parent_id": 22,
              "children": []
            }, 
            {
              "id": 150,
              "name": "subSubChild3",
              "parent_id": 24,
              "children": []
            }
          ]
        }]
      }]
    }
  },

  methods: {
    $_find(items, predicate) {
      let matches = [];

      for (let item of items) {
        if (predicate(item)) {
          matches.push(item);
        } 
        else if (item.children.length) {
          let subMatches = this.$_find(item.children, predicate);
          
          if (subMatches.length) {
            if (this.maintainStructure) {
              matches.push({
                ...item,
                children: subMatches
              });
            }
            else {
              matches.push(subMatches);
            }
          }
        }
      }

      return matches;
    },

    filterBy(item) {
      return item.name.toLowerCase().startsWith(this.filter.toLowerCase());
    }
  },

  computed: {
    filteredData() {
      return this.$_find(this.data, this.filterBy);
    }
  }
})



  
    
    
  
{{filteredData}}

Обратите внимание, что я добавляю к функции префикс $_ для сортировки, чтобы пометить ее как личную функцию (как рекомендуется в в этом руководстве по стилю ), поскольку мы не собираемся вызвать его где-нибудь еще.

...