首先，第一种情况，项目设置了zoom，会导致el-popconfirm、el-popover、el-tooltip、el-select位置不对
solution:
:temported="false" // 给以上标签加该属性，意思是不插入body，el-popconfirm、el-popover、el-tooltip、el-select的节点会放在当前所写的页面的相应位置
If tempored is not set, el-popconfirm is placed under the body.
Tempored="false" is set. It can be seen that el-popconfirm has been placed in the corresponding position
and can be adjusted through css. The simplest is: Absolutely, use positioning to control the position of popconfirm, top: 0, left: 0 can always be fixed at the desired position
其次，其实这个问题已经解决了大半，只有在el-table中使用popconfirm、popover、tooltip时，会出现一个新的问题：表格的单元格会遮挡popconfirm、popover、tooltip的显示，无论怎么设置z-index，都不生效
solution:
// 设置每一行的定位
<el-table
:data="tableData"
style="width: 100%"
:row-style="{
position: 'relative'
}"
>
/* 获取每一行, 排他思想, 除了被点击的那一行, 其他zIndex都设为2022,
提高pop父盒子的层级 */
const del = (index: number, event: any) => {
let listDom = document.querySelectorAll('.elp-table__row')
listDom?.forEach((item: any) => {
item.style.zIndex = 0
})
event.path[4].style['z-index'] = 2011
// listDom[index].style['z-index'] = 2011
/* event.path[4]是当前行的dom节点 如果只有一个简单的表格，用
listDom[index]去设置即可，但是我的场景是表格的每一行下面还有二
级表格，所以用event.path[4] */
};
My scenario is: click delete in the operation column, and el-popconfirm pops up, so bind the above event on the delete button and pass in the current row
<el-popconfirm
title="确定删除该分类吗?"
width="200px"
:teleported="false"
>
<template #reference>
<el-button link type="primary" :icon="Delete" @click="del(scope.$index, $event)">删除</el-button>
</template>
</el-popconfirm>
Full code:
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-style="{
position: 'relative'
}"
>
<el-table-column
label="Date"
width="180"
>
<template #default="scope">
<div style="display: flex; align-items: center">
<el-icon>
<timer />
</el-icon>
<span style="margin-left: 10px">{
{
scope.row.date }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="Name"
width="180"
>
<template #default="scope">
<el-popover
effect="light"
trigger="hover"
placement="top"
width="auto"
>
<template #default>
<div>name: {
{
scope.row.name }}</div>
<div>address: {
{
scope.row.address }}</div>
</template>
<template #reference>
<el-tag>{
{
scope.row.name }}</el-tag>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="Operations">
<template #default="scope">
<el-button
size="small"
@click="handleEdit(scope.$index, scope.row)"
>Edit</el-button>
<el-popconfirm
:teleported="false"
title="Are you sure to delete this?"
>
<template #reference>
<el-button @click="Delete(scope.$index)">Delete</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
import {
Timer } from '@element-plus/icons-vue'
interface User {
date: string
name: string
address: string
}
const handleEdit = (index: number, row: User) => {
console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
console.log(index, row)
}
const tableData: User[] = [
{
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',
},
]
function Delete(index: number) {
let listDom = document.querySelectorAll('.el-table__row')
listDom.forEach((item) => {
item.style.zIndex = 0
console.log(item)
})
listDom[index].style['z-index'] = 2022
}
</script>