el-select下拉选项有2个,内容左边为图片右边为文字,每次点击一个图片会跳转一个页面,点击另外一个图片跳转另外一个页面
时间: 2024-03-25 11:36:36 浏览: 41
select下拉列表显示图片内容
您可以在el-select的下拉选项中使用el-option组件,然后在el-option中使用自定义模板来实现左边图片右边文字的效果,同时为每个el-option绑定点击事件并在事件处理程序中进行页面跳转。以下是一个示例代码:
```html
<el-select v-model="selectedOption">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
<template v-slot:default>
<img :src="option.image" style="width: 40px; height: 40px; margin-right: 10px;">
<span>{{ option.label }}</span>
</template>
</el-option>
</el-select>
```
```javascript
data() {
return {
selectedOption: '',
options: [
{ label: '页面1', value: 'page1', image: 'page1.jpg' },
{ label: '页面2', value: 'page2', image: 'page2.jpg' },
]
}
},
methods: {
handleOptionClick(option) {
if (option.value === 'page1') {
// 跳转到页面1
} else if (option.value === 'page2') {
// 跳转到页面2
}
}
},
mounted() {
this.$nextTick(() => {
const elSelect = this.$refs.elSelect.$el.querySelector('.el-select-dropdown__list')
elSelect.addEventListener('click', (event) => {
const option = event.target.closest('.el-select-dropdown__item')
if (option) {
const index = option.getAttribute('index')
const selectedOption = this.options[index]
this.handleOptionClick(selectedOption)
}
})
})
}
```
以上代码中,我们使用了el-select和el-option组件来创建下拉选项,使用自定义模板来渲染每个选项的左边图片和右边文字。我们还定义了一个selectedOption变量来绑定el-select的选中值,并为el-select和el-option组件分别设置了相应的属性。在methods选项中,我们定义了一个handleOptionClick方法来处理选项的点击事件,并在mounted钩子中使用原生DOM事件对下拉选项的点击事件进行监听。当用户点击某个选项时,我们会获取到该选项的值,并根据值的不同来进行相应的页面跳转操作。
阅读全文