不使用 el-popover 组件手动创建一个 div 作为 Popover

1. 不使用 el-popover 组件，而是手动创建一个 div 作为 Popover：

   <template>
     <el-table :data="tableData">
       <!-- ...其他列 -->
       <el-table-column label="操作">
         <template slot-scope="scope">
           <div class="popover-trigger" @click="showPopover(scope.$index)">
             显示 Popover
           </div>
           <div class="popover" v-show="scope.row.showPopover" ref="popover">
             这里是一些内容
             <el-button size="mini" @click="hidePopover(scope.$index)">关闭</el-button>
           </div>
         </template>
       </el-table-column>
     </el-table>
   </template>
   

2. 使用 CSS 控制 Popover 的样式：

   .popover {
     position: absolute;
     z-index: 100;
     background-color: #fff;
     border: 1px solid #ccc;
     padding: 10px;
     display: none; /* 默认不显示 */
   }
   

3. 在 Vue 方法中控制显示和隐藏：

   export default {
     data() {
       return {
         tableData: [
           // ...表格数据
           { showPopover: false },
           // ...其他行数据
         ],
       };
     },
     methods: {
       showPopover(index) {
         const popover = this.$refs.popover[index];
         const trigger = this.$el.querySelector(`.popover-trigger`); // 假设每个触发器都有这个类名
         if (trigger) {
           popover.style.left = `${trigger.offsetLeft}px`;
           popover.style.top = `${trigger.offsetTop + trigger.offsetHeight}px`;
           popover.style.display = 'block';
         }
         this.tableData[index].showPopover = true;
       },
       hidePopover(index) {
         this.tableData[index].showPopover = false;
       }
     }
   };