页面中包含多个el-popover，点击其中一个显示，其他的关闭（多个el-popover，click触发，点击都不消失的问题）

问题背景：需求是el-tree中的每个树节点后都有一个按钮，点击触发el-popover的显示，但是由click触发的el-popover，在点击下一个节点时，之前的都不消失。

解决办法：注：最主要的就是:ref="`data-type-${data.id}`"这句

             <el-popover
                :ref="`data-type-${data.id}`"
                popper-class="common-popover"
                placement="right"
                trigger="click"
                :tabindex="data.id"
              >
                <div
                  slot="reference"
                  class="data-type-text"
                  type="text"
                  size="mini"
                  :title="data.data_type"
                  :class="[data.data_type + '-text']"
                  @click="handleOpenDataOptions(`data-type-${data.id}`)"
                >
                  <span>{{ data.data_type }}</span>
                </div>
              </el-popover>

// 点击popover所在按钮触发的事件,保证同一时间只有一个popover显示
    handleOpenDataOptions(ref) {
      Object.keys(this.$refs).forEach((key) => {
        if (
          key != ref &&
          key.includes("data-type-") &&
          this.$refs[key].showPopper
        ) {
          // 检测到有其他popover显示时，将其他popover关闭
          this.$nextTick(() => {
            this.$refs[key].doClose();
          });
        }
      });
    },