修改el-select选中后的文本为button
时间: 2023-07-28 10:34:21 浏览: 82
您可以使用 el-select 的 slot 属性中的 selected-label 插槽来自定义选中后的文本,将其替换为一个按钮。具体做法如下所示:
```HTML
<el-select v-model="value" placeholder="请选择">
<el-option label="选项一" value="option1"></el-option>
<el-option label="选项二" value="option2"></el-option>
<el-option label="选项三" value="option3"></el-option>
</el-select>
<!-- 替换为按钮 -->
<el-select v-model="value" placeholder="请选择">
<template v-slot:selected-label="{option}">
<el-button type="text">{{ option.label }}</el-button>
</template>
<el-option label="选项一" value="option1"></el-option>
<el-option label="选项二" value="option2"></el-option>
<el-option label="选项三" value="option3"></el-option>
</el-select>
```
在上面的示例中,我们使用了 selected-label 插槽来自定义选中后的文本。该插槽会传入一个名为 option 的参数,可以使用它的 label 属性来渲染按钮文本。我们在插槽中使用了 el-button 组件来渲染按钮,并将按钮文本设置为 option.label。
阅读全文