邢台最新通告今天_教务系统_淘宝友情链接怎么设置_搜索引擎优化的特点

如何在 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-columnv-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>