vue3的el-table操作列删除使用el-popConfirm会被表格遮挡怎么办?
popconfirm框其实已经显示了 但是被表格列遮挡了
尝试调过样式,但无论popconfirm的z-index设置多大,都不生效
也尝试过将placement设置到左边展示,也不生效
更新后:
回复
1个回答

test
2024-07-05
设置每一行的定位
删除按钮添加点击事件并传入是第几行
获取每一行, 排他思想, 除了被点击的,zIndex都设为2022, 提高pop父盒子的层级
<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>
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容