Vue基于多个Multiselect多选框实现多条件数据过滤的方案咨询

第一步：修正现有代码的已知问题 #

• 模板里门店多选的v-model="selectedstores"拼写错误，改为v-model="selectedStores"和data里的变量对应
• 原workNumbers是外层包裹数组的对象结构，先把员工数据提取为一维数组方便遍历，可直接在data里调整，或者在计算属性里预处理

第二步：添加过滤逻辑的计算属性 #

直接在Vue实例的computed字段里添加过滤方法，逻辑是：任意多选维度如果选中值为空数组，就跳过该维度的过滤；否则只保留对应字段在选中值列表里的员工：

computed: {
  filteredEmployees() {
    // 先把原始workNumbers里的员工提取为一维数组
    const allEmployees = Object.values(this.workNumbers[0] || {})
    return allEmployees.filter(emp => {
      // 班次过滤：选中不为空才校验
      if (this.selectedShifts.length > 0) {
        const shiftNames = this.selectedShifts.map(item => item.name)
        if (!shiftNames.includes(emp.shift)) return false
      }
      // 分类过滤
      if (this.selectedCategories.length > 0) {
        const cateNames = this.selectedCategories.map(item => item.name)
        if (!cateNames.includes(emp.category)) return false
      }
      // 区域过滤
      if (this.selectedAreas.length > 0) {
        const areaNames = this.selectedAreas.map(item => item.name)
        if (!areaNames.includes(emp.area)) return false
      }
      // 门店过滤
      if (this.selectedStores.length > 0) {
        const storeNames = this.selectedStores.map(item => item.name)
        if (!storeNames.includes(emp.store)) return false
      }
      // 所有校验通过就保留
      return true
    })
  }
}

第三步：替换模板中的遍历数据源 #

不管是原有表格还是新的日期维度表格，都把原来遍历的workNumbers替换为filteredEmployees即可，原有模态框的传参逻辑完全不需要修改：

原有表格修改示例 #

<tbody v-if="selectedOutput.name === 'Sold'">
  <tr v-for="emp in filteredEmployees" :key="emp.name">
    <td>{{emp.name}} - {{emp.sold}}</td>
  </tr>
</tbody>
<tbody v-else-if="selectedOutput.name === 'Purchased'">
  <tr v-for="emp in filteredEmployees" :key="emp.name">
    <td>{{emp.name}} - {{emp.purchased}}</td>
  </tr>
</tbody>

新日期表格修改示例 #

<tbody v-if="selectedOutput.name === 'Cubes'">
  <tr v-for="emp in filteredEmployees" :key="emp.name">
    <td v-for="date in dates" :key="date" >
      <div v-for="(dateSpecificData, dateValue) in emp.dates" :key="dateValue" @click="showModal(dateSpecificData)" :style="'background: ' + (dateSpecificData.unavailable > 0 ? '#f7a7a3' : '#a8f0c6')">
        <div v-if="dateValue == date ">
          @{{dateSpecificData.sold}}
        </div>
      </div>
    </td>
  </tr>
</tbody>

额外说明 #

如果你的多选框里有「所有门店」「所有区域」这类特殊选项，只需要在过滤逻辑前加判断：如果选中列表里包含该特殊选项，直接跳过该维度的校验即可，和空数组的处理逻辑一致。

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