不使用 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;
        }
      }
    };
相关推荐
dy171735 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
rannn_1115 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
元亓亓亓7 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
索迪迈科技7 小时前
Flex布局——详解
前端·html·css3·html5
DONG9137 小时前
深度解析CSS单位与媒体查询:构建现代化响应式布局的核心技术
前端·css·html·css3·媒体
一只小风华~7 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
切糕师学AI8 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js