vue实现tab多选

Vue 实现 Tab 多选功能

核心思路

通过 v-model 绑定一个数组来存储选中的 tab，结合 v-for 循环渲染 tab 列表，使用复选框或自定义样式实现多选交互。

基础实现代码示例

<template>
  <div class="tab-container">
    <div 
      v-for="tab in tabs" 
      :key="tab.id"
      class="tab-item"
      :class="{ 'active': selectedTabs.includes(tab.id) }"
      @click="toggleTab(tab.id)"
    >
      {{ tab.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 1, label: 'Tab 1' },
        { id: 2, label: 'Tab 2' },
        { id: 3, label: 'Tab 3' }
      ],
      selectedTabs: []
    }
  },
  methods: {
    toggleTab(tabId) {
      const index = this.selectedTabs.indexOf(tabId)
      if (index > -1) {
        this.selectedTabs.splice(index, 1)
      } else {
        this.selectedTabs.push(tabId)
      }
    }
  }
}
</script>

<style>
.tab-item {
  display: inline-block;
  padding: 8px 16px;
  margin-right: 8px;
  cursor: pointer;
  border: 1px solid #ddd;
}

.tab-item.active {
  background-color: #409eff;
  color: white;
}
</style>

使用复选框的实现方式

<template>
  <div class="checkbox-tabs">
    <div v-for="tab in tabs" :key="tab.id" class="tab-item">
      <input 
        type="checkbox" 
        :id="'tab-' + tab.id"
        :value="tab.id"
        v-model="selectedTabs"
      >
      <label :for="'tab-' + tab.id">{{ tab.label }}</label>
    </div>
  </div>
</template>

进阶功能实现

添加全选/取消全选功能：

methods: {
  toggleAllTabs(selectAll) {
    this.selectedTabs = selectAll 
      ? this.tabs.map(tab => tab.id) 
      : []
  }
}

添加最大选择数量限制：

methods: {
  toggleTab(tabId) {
    const maxSelection = 2 // 最大选择数量
    const index = this.selectedTabs.indexOf(tabId)

    if (index > -1) {
      this.selectedTabs.splice(index, 1)
    } else if (this.selectedTabs.length < maxSelection) {
      this.selectedTabs.push(tabId)
    }
  }
}

性能优化建议

对于大量 tab 的情况，可以使用 Set 代替数组来提高查找效率：

data() {
  return {
    selectedTabs: new Set()
  }
},
methods: {
  toggleTab(tabId) {
    if (this.selectedTabs.has(tabId)) {
      this.selectedTabs.delete(tabId)
    } else {
      this.selectedTabs.add(tabId)
    }
  }
}

与 Vuex 集成

如果需要全局状态管理：

computed: {
  selectedTabs: {
    get() {
      return this.$store.state.selectedTabs
    },
    set(value) {
      this.$store.commit('updateSelectedTabs', value)
    }
  }
}