elementui的table组件如何显示图片

在ElementUI的table组件中，如果想要显示图片，可以在table-column中使用template slot来显示图片。具体来说，可以按照以下步骤操作：

在el-table-column中定义一个prop，例如"picture"，并将其label属性设置为"头像"。
在template slot中定义一个img标签，使用":src"绑定img的src属性，并将其min-width和height设置为需要的尺寸。
在el-table:data中定义一个名为tableData的数据对象，该对象包含了需要显示的所有图片信息和其他表格数据。

例如，以下代码将在ElementUI的table组件中显示一个名为"picture"的列，其中包含了每个行数据的头像图片：

html 复制代码

<el-table:data="tableData">
  <el-table-columnprop="picture"label="头像"align="center">
    <template slot-scope="scope">
      <img:src="scope.row.image"min-width="70"height="70"/>
    </template>
  </el-table-column>
  <el-table-columnprop="name"label="人"align="center"></el-table-column>
  <el-table-columnprop=""label="地址"align="center"></el-table-column>
</el-table:data>

其中，tableData是一个包含所有表格数据的数据对象，每个行数据都包含一个名为"picture"的属性，该属性值为该行数据的头像图片的URL地址。

在ElementUI的Table组件中显示图片，可以通过自定义列模板的方式来实现。以下是一种可能的实现方式：

html 复制代码

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="picture" label="头像" align="center">
      <template slot-scope="scope">
        <img :src="scope.row.picture" :min-width="70" :height="70"/>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="人" align="center"></el-table-column>
    <el-table-column prop="address" label="地址" align="center"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          picture: 'https://example.com/image1.jpg',
          name: 'John Doe',
          address: '123 Main St'
        },
        {
          picture: 'https://example.com/image2.jpg',
          name: 'Jane Doe',
          address: '456 Elm St'
        },
        // Add more rows as needed
      ]
    }
  }
}
</script>

这个例子中，tableData 是一个包含数据的数组。每个对象都有 picture，name，和 address 属性。在 el-table-column 中，我们使用 prop 指定了对应每个对象的哪个属性值应该放入这一列。然后，我们通过使用模板和 slot-scope，显示了一个图片，其 src 属性值来自对象的 picture 属性。