Javascript VueJS使用下拉选择时如何筛选阵列数据

在我的

vue

-应用程序中，我有一系列工作公告，它们具有不同的状态，例如“活动”、“拒绝”、“草稿”、“未激活”等。现在我有一个选项卡菜单：所有工作、草稿和待批准。每个菜单选项卡都有自己的下拉菜单，您可以在其中筛选职位公告。我意识到这个特性比预期的更复杂，或者我花了太多时间处理这些问题，但由于某种原因，我无法管理，为单个菜单栏显示“全部”。例如，当我单击“待批准”菜单选项卡时，我希望看到所有状态为“未批准”和“已拒绝”的工单（请参见下面代码中的数据）

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

欢迎任何帮助

因此，这是我的组件：

<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;
 }
};

{{tab.label}


{{selectedOption}
{{tab.status}}
从“../../snippets/DataTable”导入数据表；
导出默认值{
组件：{DataTable}，
数据（）{
返回{
伊索彭：错，
搜索：“，
表格数据：[
{
id:1，
标题：“销售人员”，
发布日期：“2019-07-10”，
状态：“活动”，
申请人：23，
到期日：“2020-02-21”
},
{
id:2，
标题：“开发商”，
发布日期：“2019-11-12”，
状态：“未激活”，
申请人：111，
到期日：“2020-02-21”
},
{
id:3，
标题：“自由职业者”，
发布日期：“2019-06-10”，
状态：“需要批准”，
申请人数：222，
有效期：2020-01-10
},
{
id:4，
标题：“建筑工人”，
发布日期：“2019-12-06”，
状态：“活动”，
申请人：76，
截止日期：“2020-03-15”
},
{
id:5，
标题：“IT支持”
发布日期：“2019-11-20”，
状态：“草稿”，
申请人数：103，
到期日：“2020-04-31”
},
],
菜单：[
{
标签：“所有工作”，
选项：[
{
状态：“全部”，
},
{
状态：“活动”，
},
{
状态：“未激活”
}
]
},
{
标签：“草稿”，
选项：[
{
状态：“全部”
},
{
状态：“草稿”
}
]
},
{
标签：“待批准”，
选项：[
{
状态：“全部”，
},
{
状态：“需要批准”，
},
{
状态：“已拒绝”
}
]
},
],
下拉选项卡：[]，
选择选项：“”，
已选择的选项卡类别：“”，
类别：“，
活动选项卡：“”，
表列：[
“身份证”，
“头衔”，
“发布日期”，
“地位”，
“申请人”，
“到期日”
]
}
},
计算：{
过滤数据（）{
让status=this.selectedOption；
设category=this.category；
let filtered=this.tableData.filter（数据=>{
如果（状态=“全部”）{
返回数据；
}
返回数据。状态===状态；
});
返回过滤；
}
},
方法：{
切换列表（选项卡，索引）{
this.category=tab.options[0]。类别；
this.selectedTabCategory=选项卡；
让currentTabOptions=this.selectedTabCategory.options；
这个.clearDropDown（）；
this.selectedOption=currentTabOptions[0]。状态；
currentTabOptions.forEach（选项=>{
此选项为.dropDownTabs.push（可选）；
});
this.activeTab=索引；
},
切换（）{
this.isOpen=！this.isOpen；
},
选择（选项卡）{
this.selectedOption=tab.status；
设category=tab.category；
let filtered=this.tableData.filter（数据=>{
return data.status==this.selectedOption；
});
this.isOpen=false；
返回过滤；
},
clearDropDown（）{
this.dropDownTabs=[]；
}
},
已创建（）{}，
安装的（）{
this.selectedOption=this.menutab[0]。选项[0]。状态；
this.selectedTabCategory=this.menutab[0]。标签；
this.category=this.menutab[0]。选项[0]。类别；
让defaultOptions=this.menutab[0].options；
defaultOptions.forEach（选项=>{
此选项为.dropDownTabs.push（可选）；
});
this.activeTab=0；
}
};

我不确定这是否对你有帮助。不过我还是会试试看

单击所选选项卡时，您应该存储该选项卡。然后根据所选选项卡

选项

筛选

this.tableData

。此外，您还需要将选项卡选项

选项

映射到字符串数组，以便检查过账状态是否在其中

方法：{
切换列表（选项卡，索引）{
this.selectedTabObject=tab
//剩下的代码。。。
}
},
计算：{
过滤数据（）{
返回此.tableData.filter（数据=>{
const states=this.selectedTabObject.options.map（opt=>opt.status）
返回状态。包括（数据。状态）
})
}
}

我还创造了简单的小提琴来模仿你的问题。

---

我不确定这对你是否有帮助。不过我还是会试试看

单击所选选项卡时，您应该存储该选项卡。然后根据所选选项卡

选项

筛选

this.tableData

。此外，您还需要将选项卡选项

选项

映射到字符串数组，以便检查过账状态是否在其中

方法：{
切换列表（选项卡，索引）{
this.selectedTabObject=tab
//剩下的代码。。。
}
},
计算：{
过滤数据（）{
返回此.tableData.filter（数据=>{
const states=this.selectedTabObject.options.map（opt=>opt.status）
返回状态。包括（数据。状态）
})
}
}

而且我