用el-select选择图片
时间: 2023-08-26 22:11:56 浏览: 62
要在 `el-select` 中选择图片,你可以使用 `el-option` 组件来展示每个选项,并设置选项的值为图片的 URL 或其他标识符。然后,你可以使用 `el-select` 的 `v-model` 指令来绑定选中的值。
下面是一个示例代码,演示了如何在 `el-select` 中选择图片:
```html
<template>
<div>
<el-select v-model="selectedImage">
<el-option
v-for="image in images"
:key="image.id"
:label="image.name"
:value="image.url"
>
<img :src="image.url" alt="Image" height="50" width="50" />
</el-option>
</el-select>
<img :src="selectedImage" alt="Selected Image" height="200" width="200" />
</div>
</template>
<script>
export default {
data() {
return {
selectedImage: '', // 用于绑定选中的图片 URL
images: [
{ id: 1, name: 'Image 1', url: 'https://example.com/image1.jpg' },
{ id: 2, name: 'Image 2', url: 'https://example.com/image2.jpg' },
{ id: 3, name: 'Image 3', url: 'https://example.com/image3.jpg' },
],
};
},
};
</script>
```
在上述代码中,`images` 数组包含了要展示的图片对象,每个对象都有一个唯一的 `id`、`name` 和 `url` 属性。使用 `v-for` 指令遍历 `images` 数组,在 `el-option` 组件中展示每个选项的名称和图片。通过使用 `v-model` 指令将选中的图片 URL 绑定到 `selectedImage` 变量上,同时将选中的图片在页面上展示出来。
你可以根据自己的需求修改代码,调整图片数据和样式。