el-select下拉选项有2个,内容左边为图片右边为文字,每次点击一个图片会跳转一个html,点击另外一个图片跳转另外一个html
时间: 2024-03-25 19:37:25 浏览: 101
select下拉列表显示图片内容
您可以使用 `el-select` 的 `el-option` 搭配 `template` 来实现您的需求,具体步骤如下:
1. 在 `el-option` 中使用 `template` 定义选项的显示内容,示例代码如下:
```html
<el-option :label="label" :value="value">
<template>
<div class="option-content">
<img :src="imgSrc" class="option-img">
<span class="option-text">{{ label }}</span>
</div>
</template>
</el-option>
```
2. 使用 `@change` 事件监听选项的选择,根据选中的值动态跳转到对应的页面,示例代码如下:
```html
<el-select v-model="selectedValue" @change="handleSelectChange">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
<template>
<div class="option-content">
<img :src="option.imgSrc" class="option-img">
<span class="option-text">{{ option.label }}</span>
</div>
</template>
</el-option>
</el-select>
```
```javascript
export default {
data() {
return {
selectedValue: '',
options: [
{
value: '1',
label: '选项1',
imgSrc: 'img1.png',
pageUrl: 'page1.html'
},
{
value: '2',
label: '选项2',
imgSrc: 'img2.png',
pageUrl: 'page2.html'
}
]
}
},
methods: {
handleSelectChange(value) {
const selectedOption = this.options.find(option => option.value === value)
if (selectedOption) {
window.location.href = selectedOption.pageUrl
}
}
}
}
```
以上代码中,`options` 数组中存储了每个选项的 `value`、`label`、图片地址和跳转页面地址,在 `el-option` 中使用 `template` 定义了选项的显示内容,使用 `@change` 事件监听选项的选择,根据选中的值动态跳转到对应的页面。
阅读全文