Element Plus 表格table中，el-image实现图片预览无层级显示问题

在日常开发中，使用el-table时候需要对缩略图进行点击预览效果，但是一般会有层级显示问题，如下图

解决以上问题，直接copy下侧代码即可:

<el-table-column prop="imageUrl" label="图片">
            <template #default="scope">
              <template v-if="scope.row.imageUrl">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.imageUrl"
                  @click="handlePreview(scope.row.imageUrl)"
                  :preview-src-list="[]"
                />
              </template>
              
				//异常情况处理，无图片展示
              <div
                v-else
                style="
                  width: 50px;
                  height: 50px;
                  line-height: 50px;
                  text-align: center;
                  color: #999;
                  background-color: #f5f7fa;
                  font-size: 12px;
                "
              >
                暂无图片
              </div>

			// 预览层级直接在body上
              <teleport to="body">
                <el-image-viewer
                  v-if="previewVisible"
                  @close="closePreview"
                  :url-list="previewImages"
                  :z-index="3000"
                />
              </teleport>
            </template>
          </el-table-column>

const previewVisible = ref(false)
const previewImages = ref([])

const handlePreview = images => {
  previewImages.value = [images]// el-image组件预览时数据要求是数组
  previewVisible.value = true
  nextTick(() => {
    const viewer = document.querySelector('.el-image-viewer')
    if (viewer) viewer.style.zIndex = 3000
  })
}

实现如下所示：