vue element-ui的table列表中展示缩略图片效果实例

'# vue element-ui的table列表中展示缩略图片效果实例

一、背景与问题

在使用Element-UI开发业务系统时，我们经常需要在表格中展示图片信息。但直接使用el-table的el-image组件存在以下几个典型问题：

图片加载时表格列宽度自适应困难
大量图片导致表格性能下降
图片资源跨域问题
图片显示质量与尺寸控制需求
不同设备下显示效果不一致

传统做法是直接在el-table-column中使用<img>标签，但这样会失去Element-UI组件的统一管理能力，导致后续维护困难。本文将深入探讨使用Element-UI原生组件实现高质量缩略图展示的解决方案。

二、基本原理

Element-UI的el-image组件提供了以下核心功能：

自动处理图片懒加载
支持多尺寸适配
内置加载状态控制
自定义错误处理

在表格场景中，我们需要结合以下技术点：

列宽自适应计算
图片占位符管理
图片预加载策略
响应式布局处理
跨域资源处理机制

核心原理是通过el-image组件的lazy属性配合v-if指令，实现按需加载图片。同时利用CSS媒体查询和JavaScript动态计算，确保在不同屏幕尺寸下保持最佳显示效果。

三、环境准备

安装Element-UI（建议使用2.2.2+版本）
```
npm install element-ui --save
```
创建Vue项目（使用Vue3组合式API）
```
vue create element-table-image-demo
```

引入Element-UI

import { ElTable, ElImage } from 'element-plus'
import { defineComponent } from 'vue'

export default defineComponent({
  components: {
 ElTable,
 ElImage
  }
})

四、核心实现

1. 基础图片展示组件

<template>
  <el-image
    :src="imageUrl"
    :preview-teleport="false"
    :zoom-rate="1.5"
    :initial-index="0"
    style="width: 100px; height: 100px; object-fit: cover;"
    @error="handleImageError"
  >
    <template #placeholder>
      <div class="image-preview">
        <span class="image-placeholder">加载中</span>
      </div>
    </template>
  </el-image>
</template>

<script>
export default {
  props: {
    imageUrl: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleImageError() {
      this.$message.error('图片加载失败')
    }
  }
}
</script>

<style scoped>
.image-preview {
  width: 100px;
  height: 100px;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  color: #c0c4cc;
}
</style>

关键点解析：

使用preview-teleport避免弹窗干扰
设置zoom-rate控制缩放比例
自定义占位符样式
错误处理机制
使用object-fit: cover保证图片完整显示

2. 动态列宽计算组件

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :header-cell-style="{ background: '#f5f7fa' }"
  >
    <el-table-column
      prop="id"
      label="ID"
      width="100"
    />
    <el-table-column
      prop="title"
      label="标题"
      width="300"
    />
    <el-table-column
      label="缩略图"
      width="150"
    >
      <template #default="scope">
        <ImagePreview :image-url="scope.row.imageUrl" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import ImagePreview from './ImagePreview.vue'

export default {
  components: {
    ImagePreview
  },
  data() {
    return {
      tableData: [
        { id: 1, title: '示例图片1', imageUrl: 'https://picsum.photos/200/300' },
        { id: 2, title: '示例图片2', imageUrl: 'https://picsum.photos/200/300' },
        { id: 3, title: '示例图片3', imageUrl: 'https://picsum.photos/200/300' }
      ]
    }
  }
}
</script>

关键点解析：

设置固定列宽保证布局稳定
使用独立组件复用图片展示逻辑
响应式布局支持
错误处理统一管理

3. 响应式图片展示组件

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :header-cell-style="{ background: '#f5f7fa' }"
  >
    <el-table-column
      prop="id"
      label="ID"
      width="100"
    />
    <el-table-column
      prop="title"
      label="标题"
      width="300"
    />
    <el-table-column
      label="缩略图"
      width="150"
    >
      <template #default="scope">
        <ImagePreview
          :image-url="scope.row.imageUrl"
          :size="getResponsiveSize"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import ImagePreview from './ImagePreview.vue'

export default {
  components: {
    ImagePreview
  },
  data() {
    return {
      tableData: [
        { id: 1, title: '示例图片1', imageUrl: 'https://picsum.photos/200/300' },
        { id: 2, title: '示例图片2', imageUrl: 'https://picsum.photos/200/300' },
        { id: 3, title: '示例图片3', imageUrl: 'https://picsum.photos/200/300' }
      ]
    }
  },
  methods: {
    getResponsiveSize() {
      const width = window.innerWidth
      if (width < 600) {
        return '80px'
      } else if (width < 1024) {
        return '120px'
      } else {
        return '150px'
      }
    }
  }
}
</script>

关键点解析：

动态计算图片尺寸
响应式布局支持
适配不同设备显示需求
保持布局稳定性

五、完整案例

1. 项目结构

element-table-image-demo/
├── src/
│   ├── components/
│   │   └── ImagePreview.vue
│   ├── views/
│   │   └── TableImageDemo.vue
│   └── App.vue
├── package.json
└── index.html

2. 完整代码示例

ImagePreview.vue

<template>
  <el-image
    :src="imageUrl"
    :preview-teleport="false"
    :zoom-rate="1.5"
    :initial-index="0"
    :style="{
      width: size,
      height: size,
      objectFit: 'cover'
    }"
    @error="handleImageError"
  >
    <template #placeholder>
      <div class="image-preview">
        <span class="image-placeholder">加载中</span>
      </div>
    </template>
  </el-image>
</template>

<script>
export default {
  props: {
    imageUrl: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '150px'
    }
  },
  methods: {
    handleImageError() {
      this.$message.error('图片加载失败')
    }
  }
}
</script>

<style scoped>
.image-preview {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  color: #c0c4cc;
}
</style>

TableImageDemo.vue

<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa' }"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="100"
      />
      <el-table-column
        prop="title"
        label="标题"
        width="300"
      />
      <el-table-column
        label="缩略图"
        width="150"
      >
        <template #default="scope">
          <ImagePreview
            :image-url="scope.row.imageUrl"
            :size="getResponsiveSize"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ImagePreview from './ImagePreview.vue'

export default {
  components: {
    ImagePreview
  },
  data() {
    return {
      tableData: [
        { id: 1, title: '示例图片1', imageUrl: 'https://picsum.photos/200/300' },
        { id: 2, title: '示例图片2', imageUrl: 'https://picsum.photos/200/300' },
        { id: 3, title: '示例图片3', imageUrl: 'https://picsum.photos/200/300' }
      ]
    }
  },
  methods: {
    getResponsiveSize() {
      const width = window.innerWidth
      if (width < 600) {
        return '80px'
      } else if (width < 1024) {
        return '120px'
      } else {
        return '150px'
      }
    }
  }
}
</script>

<style scoped>
.table-container {
  padding: 20px;
}
</style>

3. 运行效果

普通视图：150px x 150px 缩略图
移动端视图：80px x 80px 缩略图
桌面视图：150px x 150px 缩略图

六、源码解析

1. ImagePreview 组件分析

<el-image
  :src="imageUrl"
  :preview-teleport="false"
  :zoom-rate="1.5"
  :initial-index="0"
  :style="{
    width: size,
    height: size,
    objectFit: 'cover'
  }"
  @error="handleImageError"
>
  <template #placeholder>
    <div class="image-preview">
      <span class="image-placeholder">加载中</span>
    </div>
  </template>
</el-image>

preview-teleport="false"：禁用预览弹窗
zoom-rate="1.5"：设置缩放比例
initial-index="0"：初始显示第一张图片
objectFit: 'cover'：保证图片完整显示
自定义占位符样式

2. 响应式计算函数

getResponsiveSize() {
  const width = window.innerWidth
  if (width < 600) {
    return '80px'
  } else if (width < 1024) {
    return '120px'
  } else {
    return '150px'
  }
}

根据窗口宽度动态计算图片尺寸
适配移动端、平板和桌面端
保持列宽一致性

七、进阶使用

1. 动态图片加载

mounted() {
  this.tableData.forEach(item => {
    if (!item.imageUrl) {
      item.imageUrl = 'https://picsum.photos/200/300'
    }
  })
}

自动补全缺失的图片URL
保证数据完整性
避免空值导致的显示错误

2. 图片预加载策略

created() {
  this.tableData.forEach(item => {
    if (item.imageUrl && !item.preloaded) {
      this.preloadImage(item.imageUrl)
      item.preloaded = true
    }
  })
},
methods: {
  preloadImage(src) {
    const img = new Image()
    img.src = src
    img.onload = () => {
      // 图片加载完成
    }
    img.onerror = () => {
      // 加载失败处理
    }
  }
}

预加载关键图片
提升用户体验
减少首次加载时的卡顿

3. 图片懒加载优化

<el-image
  :src="imageUrl"
  lazy
  :preview-teleport="false"
  :zoom-rate="1.5"
  :initial-index="0"
  :style="{
    width: size,
    height: size,
    objectFit: 'cover'
  }"
  @error="handleImageError"
>
  <template #placeholder>
    <div class="image-preview">
      <span class="image-placeholder">加载中</span>
    </div>
  </template>
</el-image>

启用lazy属性
实现按需加载
降低初始加载压力
提升性能

八、性能与工程实践

1. 性能优化策略

图片压缩：使用WebP格式
CDN加速：部署静态资源
懒加载：按需加载图片
预加载：关键图片预加载
内存管理：避免图片内存泄漏

2. 异常处理

handleImageError() {
  this.$message.error('图片加载失败')
  this.$set(this, 'imageUrl', 'https://picsum.photos/200/300')
}

自动替换失败图片
保证界面完整性
记录错误日志

3. 安全风险

XSS攻击：确保图片URL来源可信
CSRF攻击：限制图片加载域
数据泄露：加密敏感图片URL

4. 资源管理

beforeDestroy() {
  // 清除图片预加载资源
  this.tableData.forEach(item => {
    if (item.preloaded) {
      // 释放资源
    }
  })
}

避免内存泄漏
优化资源管理
提升应用稳定性

九、常见问题与踩坑

1. 图片无法加载问题

错误现象：图片显示为灰色块

解决方案：

检查图片URL有效性
使用https://协议
配置CORS头
使用CDN加速

2. 响应式布局失效

错误现象：图片尺寸不随窗口变化

解决方案：

确保window.innerWidth正确获取
使用resize事件监听
使用CSS媒体查询

3. 图片质量下降

错误现象：图片显示模糊

解决方案：

使用objectFit: 'cover'
设置width和height固定
避免使用scale变换

4. 性能瓶颈

错误现象：大量图片导致卡顿

解决方案：

使用懒加载
预加载关键图片
使用WebP格式
分页加载数据

十、最佳实践

优先使用Element-UI内置组件：保持代码简洁
实现响应式布局：适应不同设备
添加错误处理机制：保证界面完整性
采用懒加载策略：提升性能
注意安全风险：确保图片来源可信
使用CDN加速：提升加载速度
定期清理资源：避免内存泄漏

十一、总结

在Element-UI表格中展示缩略图片需要综合考虑性能、安全、用户体验等多方面因素。通过结合Element-UI的el-image组件和自定义的响应式布局，我们可以实现高质量的图片展示效果。实际开发中，应根据具体需求选择合适的实现方式，例如：

使用内置组件：适合简单场景
自定义组件：需要更精细控制
结合第三方库：需要特殊功能

在处理图片资源时，需要注意跨域问题、内存管理、性能优化等关键点。通过合理的设计和实现，可以确保在表格中展示图片既美观又高效，同时保持良好的用户体验。

vue element-ui的table列表中展示缩略图片效果实例

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 基础图片展示组件

2. 动态列宽计算组件

3. 响应式图片展示组件

五、完整案例

1. 项目结构

2. 完整代码示例

3. 运行效果

六、源码解析

1. ImagePreview 组件分析

2. 响应式计算函数

七、进阶使用

1. 动态图片加载

2. 图片预加载策略

3. 图片懒加载优化

八、性能与工程实践

1. 性能优化策略

2. 异常处理

3. 安全风险

4. 资源管理

九、常见问题与踩坑

1. 图片无法加载问题

2. 响应式布局失效

3. 图片质量下降

4. 性能瓶颈

十、最佳实践

十一、总结

评论已关闭

推荐阅读