Фильтрация таблицы с помощью vue multiselect - PullRequest
Новая
       39

Фильтрация таблицы с помощью vue multiselect

1 голос
/ 20 марта 2020

Я пытаюсь отфильтровать результаты таблицы с помощью vue -multiselect. Я вижу выбранные значения в инструментах VUE dev как часть компонента множественного выбора. Как использовать эти значения для использования в функции filter() для получения результатов отфильтрованной таблицы.

Ниже вы можете увидеть мою реализацию скрипта JS и реализацию множественного выбора шаблона.

JS Скрипт 

export default {
  data: () => ({
    policies: [],
    selectedValues: [],
    options: [],
  }),

  methods: {
    filterByStatus: function({ label, value }) {
    return this.policies.filter(data => {
        let status= data.status.toLowerCase().match(this.selectedValues.toLowerCase());
  },

Шаблон 

 <multiselect
          v-model="selectedValues"
          :options="options"
          :multiple="true"
          label="label"
          track-by="label"
          placeholder="Filter by status"
          @select="filterByStatus"
        ></multiselect>

Ответы [ 3 ]

0 голосов
/ 20 марта 2020

Лучше сохранить функцию фильтра внутри computed. 

computed:{
      filterByStatus: function ({label, value}) {
          return this.policies.filter((data) => {
              return data.status && data.status.toLowerCase().includes(this.selectedValues.toLowerCase())
          });
      }
}

Использование filterByStatus в разделе шаблона отобразит результат в реальном времени. 

<div>{{filterByStatus}}</div>
0 голосов
/ 19 апреля 2020

Вы можете использовать часы на выбранных значениях при любом изменении или выборе: 

watch:{
selectedValues: function(value){
this.policies.filter(data => {
        let status= data.status.toLowerCase().match(this.selectedValues.toLowerCase());

}


}
0 голосов
/ 20 марта 2020

Выбранный вами компонент использует опору :multiple="true", это означает, что связанное значение selectedValues с v-model вернет массив объектов политики.

Вместо использования функции filterByStatus в параметрах компонента методов создайте два вычисляемых свойства.

Одно, которое вычисляет массив выбранных статусов политик, и другое, которое вычисляет отфильтрованный массив политик, которые вы хотите отобразить.

Скрипт: 

computed: {
  selectedStatuses() {
    const statuses = []
    for (const { status } of this.selectedValues) {
      statuses.push(status.toLowerCase())
    }
    return statuses
  },
  filteredPolicies() {
    if (this.selectedStatuses.length === 0) {
      return this.policies
    }
    const policies = []
    for (const policy of this.policies) {
      if (this.selectedStatuses.includes(policy.status.toLowerCase())) {
        policies.push(policy)
      }
    }
    return policies
  }
}

Шаблон: 

<multiselect
          v-model="selectedValues"
          :options="options"
          :multiple="true"
          label="label"
          track-by="label"
          placeholder="Filter by status"
        ></multiselect>

Пример: 

Vue.config.productionTip = Vue.config.devtools = false

new Vue({
  name: 'App',

  components: {
    Multiselect: window.VueMultiselect.default
  },

  data() {
    return {
      policies: [{
        label: 'Policy A',
        status: 'enabled'
      }, {
        label: 'Policy B',
        status: 'disabled'
      }, {
        label: 'Policy C',
        status: 'Deprecated'
      }],
      selectedValues: [],
      options: [{
        label: 'Enabled',
        status: 'enabled'
      }, {
        label: 'Disabled',
        status: 'DISABLED'
      }, {
        label: 'Deprecated',
        status: 'DePrEcAtEd'
      }]
    }
  },

  computed: {
    selectedStatuses() {
      const statuses = []
      for (const {
          status
        } of this.selectedValues) {
        statuses.push(status.toLowerCase())
      }
      return statuses
    },
    filteredPolicies() {
      if (this.selectedStatuses.length === 0) {
        return this.policies
      }
      const policies = []
      for (const policy of this.policies) {
        if (this.selectedStatuses.includes(policy.status.toLowerCase())) {
          policies.push(policy)
        }
      }
      return policies
    }
  },
}).$mount('#app')





  
  Policies: {{ filteredPolicies}}
...