如何调整allComponentsFiltered逻辑实现inactive标签下的组件筛选

allComponentsFiltered 的返回结果由三个条件共同决定：

• 搜索输入内容
• component_group_id
• selectedComponent 的 status 属性

现在新增了值为 inactive 的状态标签，但组件状态对象中不存在对应的 status.inactive 字段，需要调整筛选逻辑，选中 inactive 标签时返回所有 status.active 不为 true 的组件。

现有代码参考 #

const state = {
    componentStatusTabs: [
     { name: "全部", value: "all", icon: "mdi-all-inclusive" },
     { name: "已收藏", value: "starred", icon: "mdi-star" },
     { name: "模块化", value: "modular", icon: "mdi-view-module" },
     { name: "启用", value: "active", icon: "mdi-lightbulb-on" },
     { name: "停用", value: "inactive", icon: "mdi-lightbulb-off" }
    ],
};

// 组件状态对象结构示例
selectedComponent =  {
  component_group_id: 81,
  status: {
    active: true, 
    modular: false,
    starred: false,
  }
}

// 返回表单字段编辑器中选中的状态标签值
activeComponentEditFormFieldsStatusTabName: state => {
  return state.componentStatusTabs[state.activeStatusTab].value;
},

// 返回属于选中分组、匹配搜索字符串或符合对应状态的组件
allComponentsFiltered: (state, getters, rootState) => {
  if (!getters.hasSelectedSomeGroups) return [];
  const search = rootState.application.search.toLowerCase();
  return state.allComponents.filter(component => {
    return (
      (search === "" || component.config.general_config.title.toLowerCase().match(search)) &&
      (getters.activeComponentEditFormFieldsStatusTabName === "all" || component.status[getters.activeComponentEditFormFieldsStatusTabName]) &&
      state.selectedComponentGroups.some(group => group.id === component.component_group_id)
    );
  });
}

调整方案 #

只需要修改 allComponentsFiltered 中的状态判断逻辑，针对 inactive 标签做单独判断即可，修改后的完整代码如下：

allComponentsFiltered: (state, getters, rootState) => {
  if (!getters.hasSelectedSomeGroups) return [];
  const search = rootState.application.search.toLowerCase();
  const currentStatusTab = getters.activeComponentEditFormFieldsStatusTabName;
  return state.allComponents.filter(component => {
    // 状态标签匹配逻辑单独处理
    let isStatusMatch = currentStatusTab === "all";
    if (!isStatusMatch) {
      if (currentStatusTab === "inactive") {
        isStatusMatch = !component.status.active;
      } else {
        isStatusMatch = component.status[currentStatusTab];
      }
    }
    return (
      (search === "" || component.config.general_config.title.toLowerCase().match(search)) &&
      isStatusMatch &&
      state.selectedComponentGroups.some(group => group.id === component.component_group_id)
    );
  });
}

效果示意 #

内容的提问来源于stack exchange，提问作者Santiago