可否将el-select 选择器 显示为一个’el-icon-s-operation‘图标,而不显示输入框
时间: 2024-01-07 09:02:45 浏览: 91
可以,你可以通过设置 `el-select` 组件的 `size`、`filterable` 和 `placeholder` 属性来实现。具体做法是设置 `size` 属性的值为 `mini`,这样可以让 `el-select` 组件的大小变小,然后设置 `filterable` 属性的值为 `false`,这样就不会显示输入框了。最后设置 `placeholder` 属性的值为 `''`,这样也可以去掉输入框的提示信息。另外,你还需要设置 `prefix-icon` 属性为 `el-icon-s-operation`,这样就可以显示一个图标了。示例代码如下:
```html
<el-select v-model="value" size="mini" filterable="false" :placeholder="''" :prefix-icon="'el-icon-s-operation'">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
<el-option label="选项3" value="option3"></el-option>
</el-select>
```
这样就可以将 `el-select` 组件显示为一个 `el-icon-s-operation` 图标了,而不显示输入框。
相关问题
可否将el-select 选择器 只显示为一个图标’el-icon-s-operation‘
可以,你可以通过设置`el-select`组件的`prefix-icon`和`clearable`属性来实现。具体做法是在`el-select`中添加`prefix-icon`属性,它的值为`el-icon-s-operation`,同时设置`clearable`属性的值为`false`,这样就可以只显示一个图标,而不显示下拉列表和清除按钮了。示例代码如下:
```html
<el-select placeholder="请选择" v-model="value" :prefix-icon="'el-icon-s-operation'" :clearable="false">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
<el-option label="选项3" value="option3"></el-option>
</el-select>
```
可否将el-select 选择器 只显示为一个图标’el-icon-s-operation‘,并且多选的选项为纵项排列的多选框’el-checkbox-group‘
可以实现。你可以在 el-select 中设置 `placeholder` 属性为一个空字符串,然后在 `suffix-icon` 属性中设置图标为 `el-icon-s-operation`。而多选框可以使用 `el-checkbox-group` 来实现,设置 `vertical` 属性为 `true` 即可使多选框纵向排列。
以下是示例代码:
```html
<el-select multiple placeholder="" suffix-icon="el-icon-s-operation">
<el-checkbox-group vertical>
<el-checkbox label="选项1"></el-checkbox>
<el-checkbox label="选项2"></el-checkbox>
<el-checkbox label="选项3"></el-checkbox>
</el-checkbox-group>
</el-select>
```
阅读全文