Vue.js 如何实现v-for渲染按钮的连续区间多选功能

核心思路 #

• 借助键盘shift按键状态区分点击场景：普通单击为单选，按住shift单击为连续区间选择
• 新增变量存储上一次选中的按钮索引，用于计算连续区间的起止范围

第一步：修改模板绑定 #

给点击事件新增原生事件对象传参：

<menu-item 
   v-for="(item, index) in menu"
   :key="`item_${index}`"
   @click="setMenuItem($event, index, item.name)"
/>

第二步：调整data定义 #

新增lastSelectedIndex存储上一次点击的索引，用于区间计算：

data() {
  return {
    // 原有业务变量
    selectedItems: [],
    menu: [/* 你的原有菜单数据 */],
    // 新增区间选择依赖变量
    lastSelectedIndex: -1
  }
}

第三步：重写setMenuItem方法逻辑 #

methods: {
  setMenuItem(e, currentIndex, currentName) {
    // 场景1：普通单击，走原有单选逻辑
    if (!e.shiftKey) {
      const existIndex = this.selectedItems.indexOf(currentName)
      if (existIndex > -1) {
        // 已选中则取消选中
        this.selectedItems.splice(existIndex, 1)
      } else {
        // 未选中则加入选中列表
        this.selectedItems.push(currentName)
      }
      // 更新锚点索引为当前点击项
      this.lastSelectedIndex = currentIndex
      return
    }

    // 场景2：按住shift点击，走连续区间选择逻辑
    if (this.lastSelectedIndex === -1) {
      // 之前未选中过任何项，降级为单选逻辑
      this.selectedItems.push(currentName)
      this.lastSelectedIndex = currentIndex
      return
    }
    // 计算连续区间的起止索引
    const start = Math.min(this.lastSelectedIndex, currentIndex)
    const end = Math.max(this.lastSelectedIndex, currentIndex)
    // 遍历区间内所有项，加入选中列表（自动去重）
    for (let i = start; i <= end; i++) {
      const itemName = this.menu[i].name
      if (!this.selectedItems.includes(itemName)) {
        this.selectedItems.push(itemName)
      }
    }
    // 可选：如果需要区间选择后更新锚点索引，可取消下方注释
    // this.lastSelectedIndex = currentIndex
  }
}

可选扩展优化 #

• 如需支持不连续多选，可额外判断e.ctrlKey（Windows）/e.metaKey（Mac）状态扩展逻辑
• 如选中项数量多、判断存在性操作频繁，可将selectedItems改为Set类型提升操作性能

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