vue3的el-table操作列删除使用el-popConfirm会被表格遮挡怎么办?

作者站长头像
站长
· 阅读数 13

vue3的el-table操作列删除使用el-popConfirm会被表格遮挡怎么办?

popconfirm框其实已经显示了 但是被表格列遮挡了

尝试调过样式,但无论popconfirm的z-index设置多大,都不生效

也尝试过将placement设置到左边展示,也不生效

更新后:vue3的el-table操作列删除使用el-popConfirm会被表格遮挡怎么办?

回复
1个回答
avatar
test
2024-07-05

设置每一行的定位answer image

删除按钮添加点击事件并传入是第几行answer image

获取每一行, 排他思想, 除了被点击的,zIndex都设为2022, 提高pop父盒子的层级answer image

answer image

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