el-select下拉选项有三个,内容左边为图片右边为文字,点击图片会跳转指定页面 html全代码
时间: 2024-03-31 08:34:06 浏览: 52
select下拉列表显示图片内容
您可以使用以下代码实现 el-select 下拉选项左边为图片右边为文字的效果,并且点击图片可以跳转到指定页面:
```html
<el-select v-model="selectedOption">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
<img :src="option.image" style="width: 20px; height: 20px; margin-right: 10px;">
</el-option>
</el-select>
```
其中,`options` 是一个包含多个选项的数组,每个选项包含 `label`、`value` 和 `image` 三个属性,分别代表选项的文本、值和图片地址。例如:
```javascript
options: [
{ label: '选项1', value: 'option1', image: 'https://example.com/image1.jpg' },
{ label: '选项2', value: 'option2', image: 'https://example.com/image2.jpg' },
{ label: '选项3', value: 'option3', image: 'https://example.com/image3.jpg' }
]
```
如果要实现点击图片跳转到指定页面的功能,可以在 `img` 标签上添加 `@click` 事件,如下:
```html
<el-select v-model="selectedOption">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
<img :src="option.image" style="width: 20px; height: 20px; margin-right: 10px;" @click="redirectTo(option.redirectUrl)">
</el-option>
</el-select>
```
其中,`redirectTo` 是一个自定义方法,用于跳转到指定页面,例如:
```javascript
methods: {
redirectTo(url) {
window.location.href = url;
}
}
```
这样,当用户点击某个选项的图片时,就会跳转到该选项指定的页面。
阅读全文