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