el-option v-for下选中的数据回显图片
时间: 2023-08-10 13:41:17 浏览: 215
要回显图片,需要在 el-option 的 label 中添加图片的路径,然后在 el-select 组件中使用 v-model 绑定选中值的变量。当选中项改变时,选中值的变量会更新,此时可以通过这个变量获取选中项的图片路径,然后在页面上显示出来。下面是一个示例代码:
```html
<el-select v-model="selectedValue">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
<img :src="item.image" alt="">
</el-option>
</el-select>
<img :src="selectedImage" alt="" v-if="selectedImage">
```
```js
data() {
return {
selectedValue: '',
options: [
{ value: '1', label: 'Option 1', image: 'image1.jpg' },
{ value: '2', label: 'Option 2', image: 'image2.jpg' },
{ value: '3', label: 'Option 3', image: 'image3.jpg' },
]
}
},
computed: {
selectedImage() {
const selectedItem = this.options.find(item => item.value === this.selectedValue)
return selectedItem ? selectedItem.image : ''
}
}
```
在上面的代码中,通过 v-for 循环遍历 options 数组,将每个选项的 label 设置为 el-option 的 label 属性,将图片路径设置为 el-option 的 label,然后使用 v-model 绑定选中值的变量 selectedValue。当选中项改变时,使用 computed 计算属性获取选中项的图片路径 selectedImage,然后在页面上显示出来。
阅读全文