element-plus中el-table组件中插槽加载el-image 组件预览图片层级错乱问题

0 问题

element-plus中，使用el-table组件，在el-table-column组件中使用插槽中插槽加载el-image组件，点击图片预览时，层级会错乱

 

1 分析

通过检查元素，可以发现class="image-viewer__wrapper"这个div是在渲染后td中，虽然有z-index，但是层级依然不正确

2 解决

方式一：el-image添加preview-teleported属性

 element-plus官网组件属性

方式二：样式覆盖

v-deep(.el-table){
 th.el-table__cell, td.el-table__cell { 
    // 设置position 使得 子元素不与其产生新的层叠关系 
    position: static; } 
}