不使用 el-popover 组件手动创建一个 div 作为 Popover

Light_102025-01-03 8:23

不使用 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;
    }
  }
};