如何根据totalItems值过滤dropdownOptions对象？

核心逻辑 #

按你的需求，我们需要：

• 当 12 < totalItem < 24 时，保留「Show 12、Show 24」
• 当 24 < totalItem < 36 时，保留「Show 12、Show 24、Show 36」
• 以此类推，即保留所有不超过第一个大于totalItem的12的倍数的选项

实现代码 #

以下是基于Vue computed属性的完整实现：

const dropdownOptions = {
  12: "Show 12",
  24: "Show 24",
  36: "Show 36",
  48: "Show 48",
}

const totalItem = 19

const dropdownOptionFiltered = computed(() => {
  // 1. 将对象的键转换为数字数组，并按升序排序
  const sortedOptionValues = Object.keys(dropdownOptions)
    .map(Number)
    .sort((a, b) => a - b)
  
  // 2. 计算允许显示的最大选项值：第一个大于totalItem的12的倍数
  const maxAllowedValue = Math.ceil(totalItem / 12) * 12
  
  // 3. 筛选符合条件的选项，生成新的对象
  const filteredOptions = {}
  for (const value of sortedOptionValues) {
    if (value <= maxAllowedValue) {
      filteredOptions[value] = dropdownOptions[value]
    } else {
      // 数组已排序，后续值都更大，直接终止循环提升性能
      break
    }
  }
  
  return filteredOptions
})

代码说明 #

1. 排序选项键：把dropdownOptions的键转为数字数组并排序，确保从小到大处理选项，避免对象键顺序带来的问题。
2. 计算最大允许值：
   • Math.ceil(totalItem / 12) 对totalItem的12倍数向上取整
   • 乘以12得到第一个大于等于totalItem的12的倍数（比如totalItem=19时得到24，totalItem=25时得到36）
3. 筛选并生成结果：遍历排序后的选项值，把小于等于最大允许值的选项保留到新对象中，因数组已排序，遇到第一个超过阈值的选项可直接终止循环。

边界调整（可选） #

如果需要当totalItem等于12的倍数时，显示到下一个倍数（比如totalItem=24时显示到36），修改maxAllowedValue的计算方式即可：

const maxAllowedValue = (Math.floor(totalItem / 12) + 1) * 12

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