-
不使用
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
相关推荐
前端 贾公子31 分钟前
解决浏览器端 globalThis is not defined 报错码农小河6635 分钟前
AI 一键生成 HTML/CSS/JS 静态网站【压缩包返回可直接提交】JianZhen✓2 小时前
2026前端高频面试题总结(Vue/JS/网络/Webpack/性能优化/手写)贫民窟的勇敢爷们2 小时前
Spring Boot+Vue电商系统开发实战:架构设计与核心实现李白的天不白2 小时前
webpack 与 vue-loader 版本冲突问题ZC跨境爬虫3 小时前
跟着 MDN 学 HTML day_13:多媒体嵌入 —— 视频与音频Dxy123931021615 小时前
SVG画的曲线如何高亮显示ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_12:(HTML网页图片嵌入)你真的快乐吗1 天前
@fuxishi/svg-icon:一个 Vue 3 svg本地图标+iconify图标组件库,让图标管理不再头疼阿拉丁的梦1 天前
blender最好的多通道吸色工具(拾取纹理颜色排除灯光)