el-select多选回显根据不同状态el-tag显示不同颜色
时间: 2024-11-27 09:18:25 浏览: 6
element-ui 远程搜索组件el-select在项目中组件化的实现代码
在Element UI的`el-select`组件中,如果你想要实现多选功能,并且在选项被选中后根据不同的状态显示不同颜色的`el-tag`(标签),你可以这样做:
首先,在数据结构中为每个选项添加一个`status`字段,这个字段用于存储选项的状态。例如:
```javascript
data() {
return {
options: [
{ value: 'option1', label: 'Option 1', status: 'default' },
{ value: 'option2', label: 'Option 2', status: 'active' },
// 其他选项...
],
selectedOptions: [],
}
}
```
然后,在`el-select`的`v-model`绑定的数组里维护已选择的选项:
```html
<el-select v-model="selectedOptions" multiple>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:tag-class="{ active: item.status === 'active', default: item.status === 'default' }">
</el-option>
</el-select>
```
在上面的代码中,`:tag-class`属性接受一个对象,通过判断`item.status`的值来设置`el-tag`的CSS类名。如果`status`是`'active'`,则应用`active`类;如果是`'default'`,则应用`default`类。
为了达到预期效果,你需要自定义这两个CSS类并为其设置相应的背景色。例如:
```css
.el-tag.active {
background-color: #0084ff;
}
.el-tag.default {
background-color: #e9ecef;
}
```
阅读全文