方法一:
1、绑定内联样式
2、确定背景图片
3、
方法二:注意两层循环, 样式:style=“background-image: url(${require('@/images/dataSourceTypeIcon/' + item.name + '.png')})
”
<div>
<div style="height: 400px; overflow: hidden auto">
<div v-for="(group, index) of options" :key="index">
<div class="group_name">{{ group.group_name }}</div>
<a-row :gutter="[16, 16]">
<a-col :span="6" v-for="item of group.items" :key="item.id" v-show="item.name.search(searchVal) !== -1">
<span class="logo" @click="$emit('select', item)" :style="`background-image: url(${require('@/images/dataSourceTypeIcon/' + item.name + '.png')})`"> </span>
<div style="text-align: center">{{ item.name }}</div>
</a-col>
</a-row>
</div>
</div>
</div>
<script>
export default {
name: "selectTypeModal",
props: {
visible: {
type: Boolean,
},
sourceTypeList: {
type: Array,
default: [],
},
},
emits: ["select", "update:visible"],
data() {
return { searchVal: "" };
},
computed: {
options() {
let options = {};
for (const item of this.sourceTypeList) {
if (options[item.classifier] === undefined) options[item.classifier] = [item];
else options[item.classifier].push(item);
}
return Object.entries(options).map(([group_name, items]) => ({ group_name, items }));
},
},
};
</script>