el-select多选如何隐藏第一个值的关闭符号
时间: 2023-10-13 20:17:14 浏览: 65
el-select 下拉框多选实现全选的实现
5星 · 资源好评率100%
可以使用 `el-select` 的 `prefix-icon` 属性来自定义第一个值的显示内容,然后通过 CSS 将其样式设置为与关闭符号相同,从而隐藏关闭符号。具体步骤如下:
1. 设置 `el-select` 的 `prefix-icon` 属性为一个元素,比如 `<span class="prefix-icon">▼</span>`,代表第一个值的显示内容为一个下箭头。
2. 使用 CSS 将 `.prefix-icon` 的样式设置为与关闭符号相同,比如 `cursor: pointer; font-family: 'element-icons'; font-size: 14px; padding: 0 10px;`。
3. 使用 CSS 将 `.el-select__tags-text:first-child .el-tag__close` 的样式设置为 `display: none;`,即隐藏第一个值的关闭符号。
具体代码如下:
```html
<el-select v-model="selectedOptions" multiple>
<span class="prefix-icon">▼</span>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
```
```css
.prefix-icon {
cursor: pointer;
font-family: 'element-icons';
font-size: 14px;
padding: 0 10px;
}
.el-select__tags-text:first-child .el-tag__close {
display: none;
}
```
阅读全文