vue3如何使用element-plus的el-table组件展示图片表格

在Vue 3中使用Element Plus的<el-table>组件展示包含图片的表格，你需要定义一个包含图片信息的数据源，并在<el-table-column>中使用自定义的渲染函数来显示图片。

以下是一个简单的例子：

1. 安装Element Plus：

npm install element-plus --save

2. 在你的Vue组件中使用<el-table>展示图片：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="头像" width="180">
      <template #default="{ row }">
        <el-image
          style="width: 100px; height: 100px"
          :src="row.imageUrl"
          fit="fill"></el-image>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElImage } from 'element-plus';
 
const tableData = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    imageUrl: 'https://example.com/image1.jpg',
  },
  // ... 其他数据项
]);
</script>
 
<style>
/* 你的样式 */
</style>

在这个例子中，我们定义了一个名为tableData的响应式数据，它包含日期、姓名和图片链接（imageUrl）。在<el-table-column>中，我们使用#default插槽来自定义列的内容渲染，并使用<el-image>组件来显示图片。记得在<style>标签中添加必要的CSS样式来调整图片的显示。