当前位置：首页 > VUE

vue前端实现多选

2026-01-17 20:19:06VUE

Vue 前端实现多选的方法

使用 `v-model` 绑定数组

在 Vue 中，可以通过 v-model 绑定一个数组来实现多选功能。适用于复选框组（checkbox）或多选下拉框（select）。

<template>
  <div>
    <h3>选择你喜欢的编程语言</h3>
    <div v-for="language in languages" :key="language">
      <input 
        type="checkbox" 
        :id="language" 
        :value="language" 
        v-model="selectedLanguages"
      />
      <label :for="language">{{ language }}</label>
    </div>
    <p>已选择: {{ selectedLanguages }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      languages: ['JavaScript', 'Python', 'Java', 'C++'],
      selectedLanguages: []
    };
  }
};
</script>

使用多选下拉框

通过 <select> 标签的 multiple 属性实现多选下拉框。

vue前端实现多选

<template>
  <div>
    <h3>选择你喜欢的编程语言</h3>
    <select v-model="selectedLanguages" multiple>
      <option v-for="language in languages" :key="language" :value="language">
        {{ language }}
      </option>
    </select>
    <p>已选择: {{ selectedLanguages }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      languages: ['JavaScript', 'Python', 'Java', 'C++'],
      selectedLanguages: []
    };
  }
};
</script>

使用第三方组件库

如果需要更丰富的多选功能（如搜索、标签展示等），可以使用第三方组件库，例如 Element UI 或 Vuetify。

Element UI 示例：

vue前端实现多选

<template>
  <div>
    <el-select v-model="selectedLanguages" multiple placeholder="请选择">
      <el-option
        v-for="language in languages"
        :key="language"
        :label="language"
        :value="language"
      />
    </el-select>
    <p>已选择: {{ selectedLanguages }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      languages: ['JavaScript', 'Python', 'Java', 'C++'],
      selectedLanguages: []
    };
  }
};
</script>

Vuetify 示例：

<template>
  <div>
    <v-select
      v-model="selectedLanguages"
      :items="languages"
      multiple
      label="选择你喜欢的编程语言"
    />
    <p>已选择: {{ selectedLanguages }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      languages: ['JavaScript', 'Python', 'Java', 'C++'],
      selectedLanguages: []
    };
  }
};
</script>

自定义多选组件

如果需要高度自定义的多选功能，可以封装一个自定义组件。

<template>
  <div>
    <div class="custom-multi-select">
      <div 
        v-for="item in items" 
        :key="item.value" 
        class="select-item"
        :class="{ 'selected': selectedValues.includes(item.value) }"
        @click="toggleSelection(item.value)"
      >
        {{ item.label }}
      </div>
    </div>
    <p>已选择: {{ selectedValues }}</p>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedValues: []
    };
  },
  methods: {
    toggleSelection(value) {
      const index = this.selectedValues.indexOf(value);
      if (index === -1) {
        this.selectedValues.push(value);
      } else {
        this.selectedValues.splice(index, 1);
      }
    }
  }
};
</script>

<style>
.custom-multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.select-item {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.select-item.selected {
  background-color: #409eff;
  color: white;
}
</style>