element-plus v-for el-popover显示隐藏

### Element Plus 使用 `v-for` 循环控制 `el-popover` 组件的显示和隐藏

为了在使用 `Element Plus` 的项目中通过 `v-for` 实现多个 `el-popover` 组件并分别控制其显示和隐藏，可以采用以下方法：

#### 数据绑定与事件处理
创建一个数组来存储各个 popover 的状态，并将其与模板中的数据进行双向绑定。对于每一个由 `v-for` 渲染出来的项，都需要有一个独立的状态变量用于管理该特定 popover 是否可见。

<template>
  <div class="example">
    <!-- 假设 items 是要遍历的数据列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
        
        <!-- 每个 el-popover 对应于 items 数组的一项 -->
        <el-button @click="togglePopover(index)">点击</el-button>

        <el-popover
          ref="popovers"
          placement="top-start"
          title="标题"
          width="200"
          trigger="manual"
          :visible.sync="popoverVisible[index]"
        >
          <p>这是一些内容。</p>
          <div style="text-align: right; margin-top: 8px;">
            <el-button size="mini" type="primary" @click="closePopover(index)">关闭</el-button>
          </div>
        </el-popover>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  data() {
    return {
      items: [
        {name: "Item One"},
        {name: "Item Two"}
      ],
      popoverVisible: [] // 存储每个 popover 的可见性状态
    };
  },
  methods: {
    togglePopover(idx){
      this.$set(this.popoverVisible, idx, !this.popoverVisible[idx]);
      
      const popoversRef = this.$refs.popovers;
      if (Array.isArray(popoversRef)) {
        let instance = popoversRef[idx];
        if (!instance.doShow && this.popoverVisible[idx]) {
          setTimeout(() => {
            instance.show();
          }, 0);
        }
      }
    },
    closePopover(idx){
      this.$set(this.popoverVisible, idx, false);

      const popoversRef = this.$refs.popovers;
      if (Array.isArray(popoversRef)){
        let instance = popoversRef[idx];
        if(instance.doClose){
          instance.hide();
        }
      }
    }
  },
  mounted(){
    // 初始化 popoverVisible 数组长度等于 items 数量
    this.items.forEach((_, i) => {
      this.$set(this.popoverVisible, i, false);
    });
  }
};
</script>

上述代码展示了如何利用 Vue.js 和 Element Plus 来动态地管理和展示多个 `el-popover` 实例。注意这里的 `ref="popovers"` 被用来获取所有的 popover 实例以便手动调用它们的方法[^1]。