如何在 ElementUI 的表格组件 Table 中插入图片缩略图，通过鼠标悬停显示大图？本文主要介绍以下2种方式：

方法1：直接在模板元素中插入

<template>
  <el-table :data="tableData">
    <el-table-column label="图片">
      <template slot-scope="scope">
        <el-popover placement="right" trigger="hover">
          <img :src="scope.row.picture" style="max-width: 500px; max-height: 500px;">
          <img slot="reference" :src="scope.row.thumbnail" style="width: 50px; height: 50px; vertical-align: middle;">
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>
`<script>
export default {
data() {
return {
tableData: [{
thumbnail: 'https://www.lervor.com/thumbnail.jpg',
picture: 'https://www.lervor.com/picture.jpg'
}]
}
}
}
</script>`

方法2：通过表格列属性格式化

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :label="column.label"
      :formatter="column.formatter"
    />
  </el-table>
</template>
`<script>
export default {
data() {
return {
tableData: [{
thumbnail: 'https://www.lervor.com/thumbnail.jpg',
picture: 'https://www.lervor.com/picture.jpg'
}],
columns: [
{
label: '图片',
formatter: row => {
return this.$createElement('el-popover', {
attrs: {
trigger: 'hover',
placement: 'right'
}
}, [
this.$createElement('img', {
attrs: {
style: 'max-width: 500px; max-height: 500px;',
src: ``${row.picture}``
}
}),
this.$createElement('img', {
attrs: {
style: 'width: 50px; height: 50px; vertical-align: middle;',
src: ``${row.thumbnail}``
},
slot: 'reference'
})
])
}
}
]
}
}
}
</script>`

效果图如下：

延伸：

通过 Image 图片 组件，结合 previewSrcList 属性，也可以实现类似效果（表格中插入图片缩略图，点击开启图片预览），这里不做具体展开。

相关知识点和文档：

• Element Table 表格：https://element.eleme.io/#/zh-CN/component/table
• Element Popover 弹出框：https://element.eleme.io/#/zh-CN/component/popover
• Image 图片：https://element.eleme.io/#/zh-CN/component/image
• createElement：https://v2.cn.vuejs.org/v2/guide/render-function.html#%E8%99%9A%E6%8B%9F-DOM

思考

如何在 ElementUI 表格中插入多张图片，实现类似效果？