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