vue-elementui多组图片墙回显

在Vue.js与Element UI框架结合的情况下，创建一个多组图片墙（通常是指展示一组或多组图片列表的布局）并使其能够回显数据，你可以按照以下步骤操作：

1. **安装依赖**：首先需要确保你已经在项目中安装了Vue、Element UI以及相关的图片库如`vue-image-preview`用于预览图片。

npm install vue vue-router element-ui axios vue-image-preview

2. **组件结构**：创建一个名为`ImageWall.vue`的组件，它将包含图片列表的显示和预览功能。使用`<el-carousel>`来自Element UI构建轮播图，`<el-row>`和`<el-col>`用于组织图片布局。

<template>
  <div>
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="(item, index) in imageItems" :key="index">
        <img :src="item.src" @click="showImagePreview(item)" />
        <el-image-preview ref="preview" v-if="isPreviewVisible"></el-image-preview>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageItems: [], // 存放图片数据
      isPreviewVisible: false,
    };
  },
  methods: {
    showImagePreview(imgItem) {
      this.isPreviewVisible = true;
      this.$refs.preview.setImage(imgItem);
    },
  },
  props: { // 接收父组件传递的数据
    images: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    this.imageItems = this.images; // 回显数据
  },
};
</script>

3. **回显数据**：在父组件中（例如`App.vue`），传入你想显示的图片数组给`ImageWall`组件，并在组件挂载时设置数据。

<template>
  <div id="app">
    <ImageWall :images="imageData" />
  </div>
</template>

<script>
import ImageWall from '@/components/ImageWall.vue';

export default {
  components: {
    ImageWall,
  },
  data() {
    return {
      imageData: [
        // 这里可以是多组图片数据，每组包含src属性
        { src: 'path/to/image1.jpg' },
        { src: 'path/to/image2.jpg' },
        // 更多图片...
      ],
    };
  },
};
</script>