javascript - VueJS如何在使用下拉选择时过滤数组数据

Question

在我的 vue-app 中，我有一系列职位发布，它们具有不同的状态，例如“活跃”、“已拒绝”、“草稿”、“not_active”等。现在我有一个选项卡菜单:所有工作、草稿和待批准。每个菜单选项卡都有自己的下拉菜单，您可以在其中过滤职位发布。我意识到这个功能比预期的更复杂，或者也许我在这些问题上花了太多时间，但由于某种原因，我无法管理，为单个菜单选项卡显示“全部”。例如，当我单击“待批准”菜单选项卡时，我想查看所有状态为“未批准”和“已拒绝”的职位发布(请参阅下面代码中的数据)。

所以我的问题是，如何正确解决这个问题？职位发布数据对象是否也需要有一个类别？

非常欢迎任何帮助!

所以，这是我的组件:

<template>
  <div>
    <div class="tabs">
      <ul>
        <li v-for="(tab, index) in menuTabs” :key="tab.id" :class="{ 'active': activeTab === index  }"
        @click="toggleList(tab, index)” >
         <span>{{tab.label}}</span>
       </li>
     </ul>
   </div>

   <div class="dropdown has-prepend col-8" :class="{ active: isOpen }">
     <div :class="{ active: isOpen }" class="dropdown-select" @click="toggle">
        {{ selectedOption }}
       <i class="icon-chevron_down" />
     </div>
     <div class="dropdown-options" v-show="isOpen">
       <div class="option" v-for="tab in dropDownTabs" @click="select(tab)" :key="tab.id">
         <span>{{ tab.status }}</span>
       </div>
    </div>
  </div>

  <div class="block">
    <DataTable :data="filteredData" :columns="tableColumns" :filter="search" />
  </div>
 </div>
</template>

import DataTable from '../../snippets/DataTable';

export default {
  components: { DataTable },
  data() {
    return {
      isOpen: false,
      search: "",
      tableData: [
      {
        id: 1,
        title: "Salesperson",
        publish_date: "2019-07-10",
        status: "active",
        applicants: 23,
        expiration_date: "2020-02-21"
      },
      {
        id: 2,
        title: "Developer",
        publish_date: "2019-11-12",
        status: "not_active",
        applicants: 111,
        expiration_date: "2020-02-21"
      },
      {
        id: 3,
        title: "Freelanceer",
        publish_date: "2019-06-10",
        status: "need_approval",
        applicants: 222,
        expiration_date: "2020-01-10"
      },
      {
        id: 4,
        title: "Construction worker",
        publish_date: "2019-12-06",
        status: "active",
        applicants: 76,
        expiration_date: "2020-03-15"
      },
      {
        id: 5,
        title: "IT support”
        publish_date: "2019-11-20",
        status: "draft",
        applicants: 103,
        expiration_date: "2020-04-31"
      },
    ],
    menuTabs: [
     {
       label: "All jobs",
       options: [
       {
         status: "all",
       },
       {
        status: "active",
       },
       {
        status: "not_active"
       }
     ]
    },
    {
      label: "Drafts",
      options: [
      {
        status: "all"
      },
      {
        status: "draft"
      }
     ]
   },
   {
     label: "To Be Approved",
     options: [
     {
       status: "all",
     },
     {
       status: "need_approval",
     },
     {
       status: "rejected"
     }
     ]
   },
  ],
  dropDownTabs: [],
  selectedOption: "",
  selectedTabCategory: "",
  category: "",
  activeTab: "",
  tableColumns: [
    "id",
    "title",
    "publish_date",
    "status",
    "applicants",
    "expiration_date"
  ]
 }
},
computed: {
  filteredData() {
    let status = this.selectedOption;

    let category = this.category;

    let filtered = this.tableData.filter(data => {
    if (status == "all") {
      return data;
    }
    return data.status === status;
  });
  return filtered;
 }
},
methods: {
  toggleList(tab, index) {
    this.category = tab.options[0].category;
    this.selectedTabCategory = tab;
    let currentTabOptions = this.selectedTabCategory.options;

    this.clearDropDown();
    this.selectedOption = currentTabOptions[0].status;

    currentTabOptions.forEach(option => {
      this.dropDownTabs.push(option);
    });

    this.activeTab = index;
  },
  toggle() {
    this.isOpen = !this.isOpen;
  },
  select(tab) {
    this.selectedOption = tab.status;

    let category = tab.category;

    let filtered = this.tableData.filter(data => {
      return data.status === this.selectedOption;
    });

    this.isOpen = false;

    return filtered;
  },
  clearDropDown() {
     this.dropDownTabs = [];
  }
},
created() {},
mounted() {
  this.selectedOption = this.menuTabs[0].options[0].status;
  this.selectedTabCategory = this.menuTabs[0].label;
  this.category = this.menuTabs[0].options[0].category;
  let defaultOptions = this.menuTabs[0].options;
  defaultOptions.forEach(option => {
    this.dropDownTabs.push(option);
  });
  this.activeTab = 0;
 }
};

Answer 1

我不确定它是否会对您有帮助。但无论如何我都会尝试。

单击时应存储所选选项卡。然后根据所选选项卡选项过滤this.tableData。此外，您还需要将选项卡选项 options 映射到字符串数组，以便您可以检查发布状态是否在其中。

methods: {
  toggleList (tab, index) {
    this.selectedTabObject = tab
    // rest of your code...
  }
},
computed: {
  filteredData () {
    return this.tableData.filter(data => {
      const states = this.selectedTabObject.options.map(opt => opt.status)
      return states.includes(data.status)
    })
  }
}

我还创建了简单的 fiddle 来模仿你的问题。 https://jsfiddle.net/3hqnp7u2/7/