el-option v-for下选中的lable中数据回显下拉框内图片
时间: 2024-03-23 19:42:43 浏览: 56
el-select获取选中的label值.pdf
5星 · 资源好评率100%
如果你在 el-option 的下拉选项中使用了 v-for 渲染数据,并且这些数据包含了图片地址和标签,那么可以通过自定义 el-option 的内容模板实现选中数据时回显图片。具体实现步骤如下:
1. 定义一个变量来保存选中的数据的值:
```javascript
data() {
return {
selectedLabel: null
}
}
```
2. 在 el-select 组件上绑定 v-model,将选中的数据的值赋值给 selectedLabel 变量:
```html
<el-select v-model="selectedLabel">
<el-option v-for="(item, index) in dataList" :key="index" :label="item.label" :value="item">
<template slot="label">
<img class="select-img" :src="item.imageUrl" />
<span class="select-text">{{ item.label }}</span>
</template>
</el-option>
</el-select>
```
3. 在页面中使用 img 标签将选中数据的图片进行回显,使用 span 标签将选中数据的文本进行回显:
```html
<div v-if="selectedLabel">
<img :src="selectedLabel.imageUrl" />
<span>{{ selectedLabel.label }}</span>
</div>
```
在 el-option 组件中,使用 slot 标签自定义内容模板,将每个选项的图片和文本分别渲染到一个 span 标签和 img 标签中。当用户在下拉框中选择某个选项时,选中的数据的值会被赋值给 selectedLabel 变量,从而实现选中数据的回显。在页面中,使用 v-if 判断 selectedLabel 是否存在,如果存在就将选中数据的图片和文本进行回显。
阅读全文