el-table 表格图片预览

### 实现Element UI `el-table` 组件中的图片预览功能

为了在 Element UI 的 `el-table` 中实现图片预览功能，可以利用自定义列模板来嵌入 `<img>` 标签，并通过点击事件触发大图预览。下面是一个完整的解决方案：

#### HTML 结构与 Vue.js 数据绑定

<template>
  <div id="app">
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="imagePath" label="图片" width="280">
        <template slot-scope="scope">
          <el-image 
            class="preview-img"
            :src="scope.row.imagePath"
            :preview-src-list="[scope.row.imagePath]"
            fit="cover"
            lazy>
          </el-image>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Image One', imagePath: 'https://example.com/image-one.jpg' },
        { name: 'Image Two', imagePath: 'https://example.com/image-two.png' }
      ]
    };
  }
};
</script>

<style scoped>
.preview-img img {
  max-width: 100px;
}
</style>

此代码片段展示了如何创建一个带有图片预览功能的表格。每一行数据都包含了一个名为 `imagePath` 的字段用于存储图像路径。

- 使用了 `slot-scope` 来访问当前行的数据 (`scope.row`)。
- 利用了 `el-image` 组件并设置其属性以便于处理懒加载(`lazy`) 和缩放适应容器大小(`fit="cover"`)[^3]。
- 设置了 `preview-src-list` 属性使得用户能够点击查看原尺寸的大图。