当前位置：首页 > 前端教程

elementui多选

2026-03-05 19:34:33前端教程

elementui 多选功能实现

Element UI 提供了 el-select 组件支持多选功能，通过设置 multiple 属性即可启用多选模式。以下是具体实现方法：

启用多选模式

<el-select v-model="selectedValues" multiple placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

数据绑定

elementui多选

data() {
  return {
    selectedValues: [], // 多选值保存在数组中
    options: [
      { value: 'option1', label: '选项1' },
      { value: 'option2', label: '选项2' },
      { value: 'option3', label: '选项3' }
    ]
  }
}

常用功能扩展

限制选择数量 通过 :multiple-limit 属性限制最多选择项数

<el-select 
  v-model="selectedValues" 
  multiple
  :multiple-limit="3"
  placeholder="最多选择3项">
</el-select>

可搜索多选 添加 filterable 属性启用搜索功能

elementui多选

<el-select 
  v-model="selectedValues" 
  multiple
  filterable
  placeholder="可搜索选择">
</el-select>

自定义标签显示 使用 collapse-tags 属性折叠多选标签

<el-select 
  v-model="selectedValues" 
  multiple
  collapse-tags
  placeholder="标签折叠显示">
</el-select>

注意事项

多选模式下 v-model 绑定值必须是数组类型默认情况下选中值会以标签形式展示，可通过样式调整显示效果当选项较多时建议配合虚拟滚动(virtual-scroll)使用提升性能

完整示例代码

<template>
  <div>
    <el-select 
      v-model="selectedValues" 
      multiple
      filterable
      collapse-tags
      :multiple-limit="3"
      placeholder="请选择(最多3项)">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        // 更多选项...
      ]
    }
  }
}
</script>