el-table固定列el-popover出现多个

2,519 阅读1分钟

问题:在el-table中使用el-popover,固定列后会出现多个弹框

image.png

1.给每个el-popover标签添加一个key (唯一标识的ref)

<el-popover
  placement="right-start"
  width="150"
  popper-class="cantralPop"
  trigger="click"
  :ref="`popContral-${scope.row.id}`"
  >
 <div>
 // 内容……
 </div>
  <i  slot="reference" @click="handleCont(scope.row)" class="iconfont icon-Pl_cz unfold"></i>
</el-popover>

2.在点击触发el-popover时,遍历页面中所有的refs,把带有 "popContral-" 的ref 拿出来,并调用它自身的 doClose 方法,关闭除当前点击el-popover的其他弹框

handleCont(row) {      
      const keys = 'popContral-' + row.id  //当前ref的keys
      for (const key in this.$refs) {
        if (key.indexOf('popContral-') !== -1&&keys!==key) {
            this.$refs[key].doClose();
        }
    }
}