[Style] [image-viewer, table-column] el-image组件在el-table组件中使用，配置image预览，样式层叠顺序错乱

[lovelytan]

Bug Type: Style

Environment

• Vue Version: 3.3.4
• Element Plus Version: 2.3.12
• Browser / OS: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
• Build Tool: Vite

Reproduction

Related Component

• el-image-viewer
• el-table-column

Reproduction Link

Element Plus Playground

Steps to reproduce

将图片组件放入el-table-column，点击图片预览

<template>
  <el-table :data="tableData" style="width: 100%">
    <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 label="Image">
      <el-image
        :z-index="9999"
        style="width: 100px; height: 100px;"
        src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
        :preview-src-list="['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']"
        :zoom-rate="1.2"
        fit="cover"
      />
    </el-table-column>
    <el-table-column label="Image2">
      <template #default="scope">
        <div>
          <el-image
            style="width: 100px; height: 100px"
            src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
            :preview-src-list="['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']"
            :zoom-rate="1.2"
            fit="cover"
          />
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

What is Expected?

样式正确

What is actually happening?

遮罩层叠顺序错乱

Additional comments

(empty)

[tianchaoyang]

添加preview-teleported属性

[lovelytan]

已解决，谢谢。

添加预览传送属性

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。