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

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="图片" width="180">
      <template slot-scope="scope">
        <img :src="scope.row.imgUrl" alt="pic" class="small-pic">
      </template>
    </el-table-column>
    <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 prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          imgUrl: 'https://via.placeholder.com/150'
        },
        // ... 更多数据
      ]
    };
  }
};
</script>
 
<style>
.small-pic {
  width: 100%;
  height: auto;
  max-width: 100px;
}
</style>

这个代码实例展示了如何在Vue.js和Element UI中使用<el-table>组件来展示含有缩略图的列表。在<el-table-column>中使用template插槽来自定义图片列的显示，并通过CSS限制图片大小。这是一个简洁而实用的代码示例，适合作为开发者学习和实践。