el-table+el-popover 踩坑记录

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

1. 效果图

1. 问题

   1. 树形table问题
   2. popover的取消问题
   3. 多个popover弹出（坑）

2. 解决

   1. 参照el-table的官方apiel-table 树形数据，返回的数据格式中，要携带一个自定义字段，字段内是子table。

      支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

      不过要注意自己的element-ui版本，我之前是[email protected]版本，里边并不支持树形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都会显示。真是个大坑。暂时未找到解决方案，只好放弃固定操作列了。