el-select实现下拉选择图片并回显
时间: 2023-10-14 11:12:40 浏览: 79
要实现下拉选择图片并回显,可以使用以下步骤:
1. 在 el-select 组件中设置 options 选项,每个选项对应一个图片。例如:
```
<el-select v-model="selectedImage">
<el-option v-for="(image, index) in images" :key="index" :label="image.name" :value="image.src"></el-option>
</el-select>
```
其中 images 是一个包含所有可选图片的数组,每个图片对象包含 name 和 src 两个属性。
2. 在 el-select 组件上添加 @change 事件监听器,当用户选择一张图片时触发该事件。
```
<el-select v-model="selectedImage" @change="onImageSelected">
...
</el-select>
```
3. 在事件处理函数 onImageSelected 中,将选中的图片的 src 值赋给一个 data 中的变量 selectedImageUrl。
```
data() {
return {
selectedImage: '',
selectedImageUrl: ''
}
},
methods: {
onImageSelected() {
this.selectedImageUrl = this.selectedImage
}
}
```
4. 在页面上显示选中的图片,可以使用 img 标签并将 src 属性绑定到 selectedImageUrl 变量上。
```
<img :src="selectedImageUrl" alt="Selected Image">
```
完成以上步骤后,当用户选择一张图片时,该图片会在页面上显示出来。