vue 企业网站模板_安徽网站建设公司哪家好_百度竞价托管_百度应用商店下载安装

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