eimentUi select 多选
时间: 2025-01-08 07:01:27 浏览: 49
ElementUI 是一个基于 Vue.js 的桌面端组件库,提供了丰富的 UI 组件,其中 `el-select` 组件支持多选功能。以下是如何在 ElementUI 中使用 `el-select` 组件实现多选的详细介绍:
### 1. 基本用法
首先,确保你已经安装了 ElementUI:
```bash
npm install element-ui --save
```
然后在项目中引入 ElementUI:
```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
### 2. 实现多选
在你的 Vue 组件中使用 `el-select` 组件,并设置 `multiple` 属性为 `true` 以启用多选功能:
```html
<template>
<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>
</template>
<script>
export default {
data() {
return {
selectedValues: [],
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' },
{ value: 'option4', label: '选项4' }
]
};
}
};
</script>
```
### 3. 高级用法
你还可以使用 `collapse-tags` 属性来折叠选中的标签,或者使用 `filterable` 属性来启用搜索功能:
```html
<el-select v-model="selectedValues" multiple collapse-tags filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
```
### 4. 自定义模板
你还可以自定义选中项的显示内容:
```html
<el-select v-model="selectedValues" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
```
通过以上步骤,你就可以在 ElementUI 中使用 `el-select` 组件实现多选功能。
阅读全文
相关推荐
















