el-popconfirm组件在表格中位置偏移

在表单中用elementPlus中的el-popconfirm组件,位置发生偏移,没有在点击行的位置出现气泡

img


出现的位置不对

试过官方文档里的placement属性、append-to,teleported属性,都没办法修改过来,还有什么其他办法可以解决这个现象吗

如果是每个都发生偏移的话可以用/deep/穿透去修改样式

img

你是 那种表格 ?我用官方的实例 可以


<template>
  <el-table :data="tableData" style="width: 100%">
    <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 title="Are you sure to delete this?">
    <template #reference>
     <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >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',
  },
]
</script>

https://element-plus.run/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZWwtdGFibGUgOmRhdGE9XCJ0YWJsZURhdGFcIiBzdHlsZT1cIndpZHRoOiAxMDAlXCI+XG4gICAgPGVsLXRhYmxlLWNvbHVtbiBsYWJlbD1cIkRhdGVcIiB3aWR0aD1cIjE4MFwiPlxuICAgICAgPHRlbXBsYXRlICNkZWZhdWx0PVwic2NvcGVcIj5cbiAgICAgICAgPGRpdiBzdHlsZT1cImRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiBjZW50ZXJcIj5cbiAgICAgICAgICA8ZWwtaWNvbj48dGltZXIgLz48L2VsLWljb24+XG4gICAgICAgICAgPHNwYW4gc3R5bGU9XCJtYXJnaW4tbGVmdDogMTBweFwiPnt7IHNjb3BlLnJvdy5kYXRlIH19PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvdGVtcGxhdGU+XG4gICAgPC9lbC10YWJsZS1jb2x1bW4+XG4gICAgPGVsLXRhYmxlLWNvbHVtbiBsYWJlbD1cIk5hbWVcIiB3aWR0aD1cIjE4MFwiPlxuICAgICAgPHRlbXBsYXRlICNkZWZhdWx0PVwic2NvcGVcIj5cbiAgICAgICAgPGVsLXBvcG92ZXIgZWZmZWN0PVwibGlnaHRcIiB0cmlnZ2VyPVwiaG92ZXJcIiBwbGFjZW1lbnQ9XCJ0b3BcIiB3aWR0aD1cImF1dG9cIj5cbiAgICAgICAgICA8dGVtcGxhdGUgI2RlZmF1bHQ+XG4gICAgICAgICAgICA8ZGl2Pm5hbWU6IHt7IHNjb3BlLnJvdy5uYW1lIH19PC9kaXY+XG4gICAgICAgICAgICA8ZGl2PmFkZHJlc3M6IHt7IHNjb3BlLnJvdy5hZGRyZXNzIH19PC9kaXY+XG4gICAgICAgICAgPC90ZW1wbGF0ZT5cbiAgICAgICAgICA8dGVtcGxhdGUgI3JlZmVyZW5jZT5cbiAgICAgICAgICAgIDxlbC10YWc+e3sgc2NvcGUucm93Lm5hbWUgfX08L2VsLXRhZz5cbiAgICAgICAgICA8L3RlbXBsYXRlPlxuICAgICAgICA8L2VsLXBvcG92ZXI+XG4gICAgICA8L3RlbXBsYXRlPlxuICAgIDwvZWwtdGFibGUtY29sdW1uPlxuICAgIDxlbC10YWJsZS1jb2x1bW4gbGFiZWw9XCJPcGVyYXRpb25zXCI+XG4gICAgICA8dGVtcGxhdGUgI2RlZmF1bHQ9XCJzY29wZVwiPlxuICAgICAgICA8ZWwtYnV0dG9uIHNpemU9XCJzbWFsbFwiIEBjbGljaz1cImhhbmRsZUVkaXQoc2NvcGUuJGluZGV4LCBzY29wZS5yb3cpXCJcbiAgICAgICAgICA+RWRpdDwvZWwtYnV0dG9uXG4gICAgICAgID5cbiAgICAgICAgIDxlbC1wb3Bjb25maXJtIHRpdGxlPVwiQXJlIHlvdSBzdXJlIHRvIGRlbGV0ZSB0aGlzP1wiPlxuICAgIDx0ZW1wbGF0ZSAjcmVmZXJlbmNlPlxuICAgICA8ZWwtYnV0dG9uXG4gICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICB0eXBlPVwiZGFuZ2VyXCJcbiAgICAgICAgICBAY2xpY2s9XCJoYW5kbGVEZWxldGUoc2NvcGUuJGluZGV4LCBzY29wZS5yb3cpXCJcbiAgICAgICAgICA+RGVsZXRlPC9lbC1idXR0b25cbiAgICAgICAgPlxuICAgIDwvdGVtcGxhdGU+XG4gIDwvZWwtcG9wY29uZmlybT5cbiAgICAgICBcbiAgICAgIDwvdGVtcGxhdGU+XG4gICAgPC9lbC10YWJsZS1jb2x1bW4+XG4gIDwvZWwtdGFibGU+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IGxhbmc9XCJ0c1wiIHNldHVwPlxuaW1wb3J0IHsgVGltZXIgfSBmcm9tICdAZWxlbWVudC1wbHVzL2ljb25zLXZ1ZSdcblxuaW50ZXJmYWNlIFVzZXIge1xuICBkYXRlOiBzdHJpbmdcbiAgbmFtZTogc3RyaW5nXG4gIGFkZHJlc3M6IHN0cmluZ1xufVxuXG5jb25zdCBoYW5kbGVFZGl0ID0gKGluZGV4OiBudW1iZXIsIHJvdzogVXNlcikgPT4ge1xuICBjb25zb2xlLmxvZyhpbmRleCwgcm93KVxufVxuY29uc3QgaGFuZGxlRGVsZXRlID0gKGluZGV4OiBudW1iZXIsIHJvdzogVXNlcikgPT4ge1xuICBjb25zb2xlLmxvZyhpbmRleCwgcm93KVxufVxuXG5jb25zdCB0YWJsZURhdGE6IFVzZXJbXSA9IFtcbiAge1xuICAgIGRhdGU6ICcyMDE2LTA1LTAzJyxcbiAgICBuYW1lOiAnVG9tJyxcbiAgICBhZGRyZXNzOiAnTm8uIDE4OSwgR3JvdmUgU3QsIExvcyBBbmdlbGVzJyxcbiAgfSxcbiAge1xuICAgIGRhdGU6ICcyMDE2LTA1LTAyJyxcbiAgICBuYW1lOiAnVG9tJyxcbiAgICBhZGRyZXNzOiAnTm8uIDE4OSwgR3JvdmUgU3QsIExvcyBBbmdlbGVzJyxcbiAgfSxcbiAge1xuICAgIGRhdGU6ICcyMDE2LTA1LTA0JyxcbiAgICBuYW1lOiAnVG9tJyxcbiAgICBhZGRyZXNzOiAnTm8uIDE4OSwgR3JvdmUgU3QsIExvcyBBbmdlbGVzJyxcbiAgfSxcbiAge1xuICAgIGRhdGU6ICcyMDE2LTA1LTAxJyxcbiAgICBuYW1lOiAnVG9tJyxcbiAgICBhZGRyZXNzOiAnTm8uIDE4OSwgR3JvdmUgU3QsIExvcyBBbmdlbGVzJyxcbiAgfSxcbl1cbjwvc2NyaXB0PlxuIiwiaW1wb3J0X21hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge31cbn0iLCJfbyI6e319

你是否加了类似 transform 的 css 属性?