渲染数组给el-radio-button添加选中图片
时间: 2023-08-07 09:02:56 浏览: 49
你可以使用`v-for`指令来渲染一个选项数组,并为每个选项添加一个带有图片的`el-radio-button`。以下是一个示例代码:
```html
<template>
<el-radio-group v-model="selected">
<el-radio-button v-for="(option, index) in options" :key="index" :label="option.value" class="radio-button-with-image">
<img :src="option.image" :alt="option.label" class="selected-image">
<span>{{ option.label }}</span>
</el-radio-button>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
options: [
{ value: '1', label: 'Option 1', image: './selected1.png' },
{ value: '2', label: 'Option 2', image: './selected2.png' },
{ value: '3', label: 'Option 3', image: './selected3.png' },
],
selected: '1',
};
},
};
</script>
<style>
.radio-button-with-image .el-radio__label {
display: flex;
align-items: center;
}
.radio-button-with-image .selected-image {
width: 16px;
height: 16px;
margin-right: 8px;
/* 设置选中图片样式 */
}
.radio-button-with-image.is-active .selected-image {
filter: invert(1);
/* 设置选中状态下的图片样式 */
}
</style>
```
在这个例子中,我们首先在`data`函数中定义了一个选项数组`options`,其中包含了每个选项的值、标签和选中图片的URL。然后,我们使用`v-for`指令来循环渲染每个选项,并为每个选项添加一个带有图片的`el-radio-button`。我们使用`:key`来为每个选项设置一个唯一的键值,`:label`来绑定选项的值。在`<img>`元素中,我们使用`:src`和`:alt`来动态设置选中图片的URL和提示文本。最后,我们使用与上一个示例代码相同的CSS样式来设置选中图片的样式。
注意,以上代码中的图片路径需要根据实际情况进行调整。