vue多选实现

Vue 多选实现方法

基础实现（v-model + multiple）

在 Vue 中实现多选可以通过 <select> 元素的 multiple 属性结合 v-model 完成。v-model 会绑定到一个数组，用于存储选中的值。

<template>
  <select v-model="selectedItems" multiple>
    <option v-for="item in items" :value="item.value">
      {{ item.text }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      items: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    }
  }
}
</script>

复选框组实现

如果希望使用复选框实现多选，可以通过遍历选项并为每个复选框绑定同一个数组。

<template>
  <div>
    <label v-for="item in items" :key="item.value">
      <input 
        type="checkbox" 
        :value="item.value" 
        v-model="selectedItems"
      >
      {{ item.text }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      items: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    }
  }
}
</script>

使用第三方组件（Element UI）

如果使用 Element UI，可以通过 el-checkbox-group 和 el-checkbox 快速实现多选功能。

<template>
  <el-checkbox-group v-model="selectedItems">
    <el-checkbox 
      v-for="item in items" 
      :label="item.value" 
      :key="item.value"
    >
      {{ item.text }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      items: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    }
  }
}
</script>

自定义多选组件

如果需要更灵活的控制，可以封装一个自定义多选组件。

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.value" 
      @click="toggleSelect(item.value)"
      :class="{ 'selected': selectedItems.includes(item.value) }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      items: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    }
  },
  methods: {
    toggleSelect(value) {
      const index = this.selectedItems.indexOf(value)
      if (index === -1) {
        this.selectedItems.push(value)
      } else {
        this.selectedItems.splice(index, 1)
      }
    }
  }
}
</script>

<style>
.selected {
  background-color: #f0f0f0;
}
</style>

注意事项

• 使用 v-model 绑定数组时，确保初始值为空数组 []，否则可能导致绑定失效。
• 多选下拉框（<select multiple>）在移动端体验较差，建议使用复选框或第三方组件优化交互。
• 如果选项数据动态加载，确保 v-for 的 :key 唯一且稳定。