不使用 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;
        }
      }
    };
相关推荐
labixiong10 小时前
transition 写在 CSS 变量上为什么不生效?给变量补张「类型身份证」
前端·css·html
2301_322414280410 小时前
活力孕康复APP 47737- 原创(免费领源码+部署教程+开发环境)
java·vue.js·spring boot·mysql·微信小程序·idea·微信开发者工具
世岩清上11 小时前
展厅数字内容同质化严重,怎样打造专属叙事风格?
大数据·前端·javascript·人工智能·html·音视频·展厅改造
专业程序开发源11 小时前
springbootLivehouse票务系统-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·django·课程设计·pygame
leoZ23111 小时前
2026-09-10-静态扫描连错三次-用运行环境当裁判
前端·javascript·vue.js·人工智能·opencv·机器学习·数据挖掘
卓怡学长11 小时前
w233基于vue和springboot的宠物管理系统的设计与实现
java·vue.js·spring boot·spring·intellij-idea
梨涡泥窝14 小时前
JavaWeb——基于 Spring Boot + Vue 的图书管理系统的设计与实现
vue.js·spring boot·后端
QUOR15 小时前
ZorvAI · GenUI 技术构架与功能介绍
html·github
huali16 小时前
vue-split-screen:让 Vue Router 的导航轨迹变成两个页面
前端·javascript·vue.js
雪芽蓝域zzs17 小时前
第三十六节:keep-alive 页面缓存(Vue3 + 后台管理系统)
前端·vue.js·缓存