首页el-select多选回显根据不同状态el-tag显示不同颜色

el-select多选回显根据不同状态el-tag显示不同颜色

时间: 2024-11-27 11:18:25 浏览: 144

在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; } ```

阅读全文