el-select下拉列表选项内容为两张图片,点击图片会跳转指定页面
时间: 2023-10-02 14:14:02 浏览: 79
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
您可以在 `el-option` 中使用 `template` 来自定义选项的显示内容,然后在模板中插入两个 `img` 标签,分别对应两张图片,并分别设置 `click` 事件绑定到不同的跳转链接,如下所示:
```html
<el-select v-model="value">
<el-option>
<template v-slot:default>
<div>
<a href="https://example.com/page1">
<img src="image1.png" @click.stop />
</a>
<a href="https://example.com/page2">
<img src="image2.png" @click.stop />
</a>
</div>
</template>
</el-option>
</el-select>
```
这样就可以在下拉列表中显示两张图片,并且点击不同的图片会跳转到不同的页面。需要注意的是,使用 `@click.stop` 可以阻止点击事件冒泡,避免触发 `el-select` 的选中事件。
阅读全文