vue实现tab多选

Vue实现Tab多选功能

实现Tab多选功能通常需要结合v-model、事件处理和状态管理。以下是一个完整的实现方案：

模板部分

<template>
  <div>
    <div class="tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab.id"
        class="tab"
        :class="{ 'active': selectedTabs.includes(tab.id) }"
        @click="toggleTab(tab.id)"
      >
        {{ tab.label }}
      </div>
    </div>
    <div>已选: {{ selectedTabs.join(', ') }}</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.push(tabId)
      } else {
        this.selectedTabs.splice(index, 1)
      }
    }
  }
}
</script>

样式部分

<style scoped>
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab {
  padding: 8px 16px;
  border: 1px solid #ccc;
  cursor: pointer;
  user-select: none;
}

.tab.active {
  background-color: #42b983;
  color: white;
}
</style>

实现原理说明

数据部分定义了tabs数组和selectedTabs数组，前者存储所有可选的Tab项，后者存储当前选中的Tab ID。

toggleTab方法处理点击事件，检查点击的Tab ID是否已存在于selectedTabs数组中。如果存在则移除，不存在则添加，实现多选切换功能。

模板中使用v-for渲染所有Tab项，通过:class绑定动态样式，当Tab ID存在于selectedTabs数组时应用active类。

进阶功能扩展

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

methods: {
  toggleAll() {
    if (this.selectedTabs.length === this.tabs.length) {
      this.selectedTabs = []
    } else {
      this.selectedTabs = this.tabs.map(tab => tab.id)
    }
  }
}

添加最大选择数量限制：

methods: {
  toggleTab(tabId) {
    const index = this.selectedTabs.indexOf(tabId)
    if (index === -1) {
      if (this.selectedTabs.length < 2) { // 限制最多选择2个
        this.selectedTabs.push(tabId)
      }
    } else {
      this.selectedTabs.splice(index, 1)
    }
  }
}

使用Vuex管理状态

对于大型应用，建议使用Vuex管理选中状态：

// store.js
export default new Vuex.Store({
  state: {
    selectedTabs: []
  },
  mutations: {
    toggleTab(state, tabId) {
      const index = state.selectedTabs.indexOf(tabId)
      if (index === -1) {
        state.selectedTabs.push(tabId)
      } else {
        state.selectedTabs.splice(index, 1)
      }
    }
  }
})