-
不使用
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>
-
使用 CSS 控制 Popover 的样式:
.popover { position: absolute; z-index: 100; background-color: #fff; border: 1px solid #ccc; padding: 10px; display: none; /* 默认不显示 */ }
-
在 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; } } };
不使用 el-popover 组件手动创建一个 div 作为 Popover
Light_102025-01-03 8:23
相关推荐
gnip6 小时前
企业级配置式表单组件封装王王碎冰冰13 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table天蓝色的鱼鱼14 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案我是日安15 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effectDevUI团队15 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~好好好明天会更好15 小时前
pinia从定义到运用代码小学僧15 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题东坡白菜16 小时前
SSE 实现 AI 对话中的流式输出猩兵哥哥20 小时前
前端面向对象设计原则运用 - 策略模式EMT21 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件