【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案

首先，第一种情况，项目设置了zoom，会导致el-popconfirm、el-popover、el-tooltip、el-select位置不对

解决方案：

:temported="false"			// 给以上标签加该属性，意思是不插入body，el-popconfirm、el-popover、el-tooltip、el-select的节点会放在当前所写的页面的相应位置

如果不设置temported，el-popconfirm是放在body下面的

这是设置了temported="false"的，可见此时el-popconfirm已经放到了相应的位置

然后通过css调整即可，最简单的就是：子绝父相，用定位控制popconfirm的位置，top: 0, left: 0 就可以一直固定在需要的位置上

其次，其实这个问题已经解决了大半，只有在el-table中使用popconfirm、popover、tooltip时，会出现一个新的问题：表格的单元格会遮挡popconfirm、popover、tooltip的显示，无论怎么设置z-index，都不生效

解决方案：

// 设置每一行的定位
<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] */
};

我的场景是：点击操作列的删除，弹出el-popconfirm，所以在删除按钮上绑定上述事件并传入当前是第几行

<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>

完整代码：

<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>