v-for的多个div中，关联一个el-popover

例：

html代码

<div style="display:none">

      <el-popover 

        placement="right-start" 

        popper-class="popper" 

        v-if="showPop" 

        ref="pop"

        :reference='reference'

        trigger="click"

        width="200">

        <div class="status_box">

        ...

        </div>

      </el-popover>

</div>

<div :key="index" class="pagecontent_block" v-for="(item,index) in tableData">

        <div :ref="'bt'+item"

                  class="status"

                  @click="clickPop(item)"

              >{{statusData.data[item.status].text}}</div>

</div>

注：el-popover标签放在display:none的div中，不会对其他控件布局造成影响。且el-popover标签需放置在v-for的div外层，保证仅一个el-popover。

data结构体

data() {

    return {

      activeId : -1,

      reference:{},

      showPop:false,

    }

  },

js方法

clickPop( item){

      if (this.activeId === item && this.showPop )return;

      this.showPop = false;

      this.activeId = item;

      // 因为reference是需要获取dom的引用 所以需要是$el

      this.reference = this.$refs['bt'+item][0];

      this.$nextTick(() => {

          // 等待显示的popover销毁后再 重新渲染新的popover

          this.showPop = true;

          this.$nextTick(() => {

              // 此时才能获取refs引用

              this.$refs.pop.doShow();

          })

      })

    },

标签：el,reference,refs,item,popover,div,showPop
来源： https://blog.csdn.net/weixin_43744767/article/details/121232557