ant design vue 如何实现照片墙?

2023-06-20 260 0

图片.png

请求后端之后,后端会返回一个列表

我想实现把图片都显示出来,像上图中一样,一行可以有多个图片

ant design vue 有什么组件可以快速实现这一点

我想到的是,通过 a-row 和 a-col 和 span 实现,但是这样写出来的代码又臭又长,不忍直视

<div v-for="(item, index) in responseData" :key="index">
    <div class="container" v-if="index % 2 === 0">
        <div class="container-item">
            <a-row v-if="index % 2 === 0">
                <a-col :span="6">
                    <img width="250" alt="logo" :src="item.file_url" />
                </a-col>
                <a-col :span="6">
                    <p>母本 hashcode: {{ item.hash_code }}</p>
                    <div>
                        相似度评分:
                        <p style="font-size: 30px; margin-bottom: 0">{{ formattedScore(item.score) }}</p>
                    </div>
                    <p>距离{{ item.distance }}</p>
                </a-col>
                <a-col :span="6" v-if="index < responseData.length - 1">
                    <img width="250" alt="logo" :src="responseData[index + 1].file_url" />
                </a-col>
                <a-col :span="6" v-if="index < responseData.length - 1">
                    <p>母本 hashcode: {{ responseData[index + 1].hash_code }}</p>
                    <div>
                        相似度评分:
                        <p style="font-size: 30px; margin-bottom: 0">{{ formattedScore(responseData[index +
                            1].score) }}
                        </p>
                    </div>
                    <p>距离{{ responseData[index + 1].distance }}</p>
                </a-col>
            </a-row>
        </div>
    </div>
</div>

有什么优雅的实现方案吗?

又臭又长不是a-row和a-col的错,不使用这两个,可以直接写div,然后css设置flex或grid布局也一样

<a-row>
    <template v-for="(item, index) in responseData" :key="index">
        <a-col :span="6">
            <img width="250" alt="logo" :src="item.file_url" />
        </a-col>
        <a-col :span="6">
            <p>母本 hashcode: {{ item.hash_code }}</p>
            <div>
                相似度评分:
                <p style="font-size: 30px; margin-bottom: 0">{{ formattedScore(item.score) }}</p>
            </div>
            <p>距离{{ item.distance }}</p>
        </a-col>
    </template>
</a-row>

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?