使用vue multiselect过滤表

Question

我正在尝试使用vue-multiselect过滤表的结果。我可以在VUE开发工具中看到selected值作为multiselect组件的一部分。如何使用在filter()函数中使用这些值以获取过滤后的表结果。

下面您还将看到我的JS脚本实现和Template multiselect实现。

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>

Answer 1

您的选择组件正在使用道具: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')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">

<div id="app">
  <multiselect v-model="selectedValues" :options="options" :multiple="true" label="label" track-by="label" placeholder="Filter by status"></multiselect>
  <pre>Policies: {{ filteredPolicies}}</pre>
</div>

Answer 2

最好将过滤器功能保留在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>