使用 vue 多选过滤表答案

【问题标题】：Filtering a table by using vue multiselect使用 vue 多选过滤表
【发布时间】：2020-07-01 03:21:56
【问题描述】：

我正在尝试使用 vue-multiselect 过滤表的结果。我可以在 VUE 开发工具中看到 selected 值作为多选组件的一部分。我如何使用这些值在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>

【问题讨论】：

标签： javascript vue.js multi-select vue-multiselect

【解决方案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/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

您可以在任何更改或选择时对 selectedValues 使用 watch ：

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

}


}

【讨论】：