ToB企服应用市场:ToB评测及商务社交产业平台

标题: 倒霉用 el-popover 组件手动创建一个 div 作为 Popover [打印本页]

---

作者: 盛世宏图    时间: 2025-1-2 04:55
标题: 倒霉用 el-popover 组件手动创建一个 div 作为 Popover

• 倒霉用 el-popover 组件，而是手动创建一个 div 作为 Popover：
  
  1. <template>
  2.   <el-table :data="tableData">
  3.     <!-- ...其他列 -->
  4.     <el-table-column label="操作">
  5.       <template slot-scope="scope">
  6.         <div class="popover-trigger" @click="showPopover(scope.$index)">
  7.           显示 Popover
  8.         </div>
  9.         <div class="popover" v-show="scope.row.showPopover" ref="popover">
  10.           这里是一些内容
  11.           <el-button size="mini" @click="hidePopover(scope.$index)">关闭</el-button>
  12.         </div>
  13.       </template>
  14.     </el-table-column>
  15.   </el-table>
  16. </template>

  复制代码
• 使用 CSS 控制 Popover 的样式：
  
  1. .popover {
  2.   position: absolute;
  3.   z-index: 100;
  4.   background-color: #fff;
  5.   border: 1px solid #ccc;
  6.   padding: 10px;
  7.   display: none; /* 默认不显示 */
  8. }

  复制代码
• 在 Vue 方法中控制显示和隐藏：
  
  1. export default {
  2.   data() {
  3.     return {
  4.       tableData: [
  5.         // ...表格数据
  6.         { showPopover: false },
  7.         // ...其他行数据
  8.       ],
  9.     };
  10.   },
  11.   methods: {
  12.     showPopover(index) {
  13.       const popover = this.$refs.popover[index];
  14.       const trigger = this.$el.querySelector(`.popover-trigger`); // 假设每个触发器都有这个类名
  15.       if (trigger) {
  16.         popover.style.left = `${trigger.offsetLeft}px`;
  17.         popover.style.top = `${trigger.offsetTop + trigger.offsetHeight}px`;
  18.         popover.style.display = 'block';
  19.       }
  20.       this.tableData[index].showPopover = true;
  21.     },
  22.     hidePopover(index) {
  23.       this.tableData[index].showPopover = false;
  24.     }
  25.   }
  26. };

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4