当前位置：首页 > VUE

vue 实现多选功能

2026-01-15 23:14:22VUE

Vue 实现多选功能的方法

使用 `v-model` 绑定数组

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

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

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

使用第三方组件库

对于更复杂的需求（如表格多选、标签式多选），可以使用第三方 UI 库：

Element UI：el-checkbox-group 或 el-select 多选模式
Vuetify：v-checkbox 或 v-select 多选
Ant Design Vue：a-checkbox-group 或 a-select 多选

以 Element UI 为例：

<template>
  <el-checkbox-group v-model="selectedOptions">
    <el-checkbox v-for="option in options" :key="option" :label="option">
      {{ option }}
    </el-checkbox>
  </el-checkbox-group>
</template>

自定义多选逻辑

如果需要完全自定义逻辑（如点击 div 多选），可以通过事件和数组操作实现：

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @click="toggleSelection(item)"
      :class="{ 'selected': isSelected(item) }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ],
      selectedItems: []
    };
  },
  methods: {
    toggleSelection(item) {
      const index = this.selectedItems.findIndex(i => i.id === item.id);
      if (index >= 0) {
        this.selectedItems.splice(index, 1);
      } else {
        this.selectedItems.push(item);
      }
    },
    isSelected(item) {
      return this.selectedItems.some(i => i.id === item.id);
    }
  }
};
</script>

多选表格实现

结合表格组件实现行多选功能（以 Element UI 为例）：

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '数据1' },
        { name: '数据2' }
      ],
      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>