el-table+el-popover 踩坑记录

最新推荐文章于 2026-03-20 14:50:57 发布

原创最新推荐文章于 2026-03-20 14:50:57 发布 · 1.3w 阅读

·

4

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#el-button #el-popover #vue

随手记论文专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何在Element UI的项目中实现点击table操作按钮弹出带箭头小弹窗的功能，解决过程中遇到的问题包括树形table的配置、Popover触发方式的选择以及多个Popover弹出时的冲突处理。

项目需求，要求点击table后边的操作按钮，弹出修改框。但是又不是大弹框，设计的是带箭头的小弹框，于是想到了el-popover。但是碰到了坑，将解决过程记录下来

效果图

效果图

问题
1. 树形table问题
2. popover的取消问题
3. 多个popover弹出（坑）
解决
1. 参照el-table的官方apiel-table 树形数据，返回的数据格式中，要携带一个自定义字段，字段内是子table。
  
  支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
  
  不过要注意自己的element-ui版本，我之前是element-ui@2.3.2版本，里边并不支持树形table，但是看了最新办的api网站，纠结了半天。所以一定要注意自己的element-ui版本，去官网对应是否支持树形table
2. popover的触发，刚开始是click触发，但是后来发现，只要一点击别的地方，popover就会自动隐藏，并不符合需求，然后查api，发现还有一种触发方式 trigger=“manual”，手动触发
```
	<template>
		<el-popover
	    placement="bottom"
	    ref="elPopover"
	    title="标题"
	    width="200"
	    trigger="manual"
	    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
	    v-model="visible">
	    <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
	  </el-popover>
  </template>
  <script>
  export default {
    data() {
      return {
        visible: false
      };
    }
  };
</script>
```
  指定一个变量，手动控制这个变量的状态，来达到控制显示隐藏。还有，在非‘manual’中，要控制其显示隐藏，可以通过ref来操作
```
this.$refs['elPopover'].doClose()
```
  当时需求还没有修改的时候，要手动关闭弹框。然后在api中并没有发现这个函数，翻看源代码，在其中找到的。记录下。
3. 多个弹框显示，这是个大坑，足足找了半天，按钮单击一次，结果却出现了两个popover，以为是key重复，检查发现并没有。写了一个单元测试，一个一个增加属性，发现是fiexed：right 导致的，仔细查看页面dom元素，发现了el-table的固定原理

生成了两个table，固定table会覆盖在基础table上方，所以使用fiexed的话，其实会有两个完全一样的table，我用id来帮顶popover显示隐藏，所以当点击其中一个button时，两个button对应的popover都会显示。真是个大坑。暂时未找到解决方案，只好放弃固定操作列了。

评论 7

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。