vue3 element plus解决在table里预览图片时 图片被覆盖的问题

问题描述:当在table里某一个展示的图片，点击图片可以预览，遇到的问题如下所示:

image.png

源代码如下:

<template>
    <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
        <el-table-column>
            <template #default="scope">
                <el-image :src="scope.row.img"
                 :preview-src-list="[scope.row.img]"
                 />
            </template>
        </el-table-column>
        <el-table-column>
            <template #default="scope">
                <el-switch v-model="scope.row.status" @change="statusHandle(scope.row)" active-text="Online"
                    :inactive-value="false" :active-value="true"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
            </template>
        </el-table-column>
    </el-table>
</template>
<script lang="ts" setup>
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        status: false,
        address: 'No. 189, Grove St, Los Angeles',
        img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        img2:import('@/assets/images/cat.png')
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        status: true,
        img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'

    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        status: false,
        img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        status: true,
        img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    },
];

const statusHandle = (row) => {
    console.log(row);
};
</script>

解决:在el-image组件上添加如下属性即可:
:preview-teleported="true"

  <el-table-column>
            <template #default="scope">
                <el-image :src="scope.row.img"
                 :preview-src-list="[scope.row.img]"
                 :preview-teleported="true"
                 />
            </template>
        </el-table-column>

最终效果:

image.png

问题完美解决