el-popover循环点击

### 解决 `el-popover` 组件在循环中点击时出现的问题

当使用 Element UI 的 `el-popover` 组件并将其放置在一个循环结构内（如表格或其他列表），可能会遇到点击事件不正常工作的情况。这通常是因为多个 `el-popover` 实例共享相同的 DOM 结构或状态，导致行为异常。

#### 问题分析

1. **重复的 ref 属性**
如果在同一作用域内的多个 `el-popover` 使用了相同的名字作为 `ref` 值，则会引发冲突，因为 Vue 不允许同一个父级组件中有两个同名的 `ref`[^1]。

2. **组件复用**
当使用 `v-if` 控制显示隐藏时，Vue 可能会在某些情况下重用已有的组件实例而不是创建新的实例，这就可能导致旧的状态被保留下来影响新实例的行为。

3. **样式溢出**
对于内容较多的情况下，默认情况下弹窗可能不会很好地处理超出容器边界的内容展示问题[^2]。

#### 解决策略

为了确保每个 `el-popover` 能够独立运作而不互相干扰：

- **为每一个 popover 设置唯一的 key 和 ref**

通过给每一项绑定一个动态计算出来的唯一键值来区分不同的 `el-popover` 实例，并且同样地为其分配独一无二的 `ref` 名字。这样做可以防止因名称重复而导致的操作错误。

<template>
  <div v-for="(item, index) in items" :key="index">
    <!-- 动态设置 ref -->
    <el-button @click="handleClick(index)" ref="popovers">{{ item.name }}</el-button>
    
    <el-popover placement="top-start" width="auto"
                popper-class="custom-popper"
                trigger="manual"
                v-model="visible[index]"
                :ref="'popover' + index">
      {{ item.content }}
      
      <div style="text-align: right; margin-top: 8px;">
        <el-button size="mini" type="primary" @click="closePopover(index)">关闭</el-button>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: [],
      items: [
        { name: 'Item One', content: 'Content of Item one...' },
        { name: 'Item Two', content: 'Content of Item two...' }
      ]
    };
  },
  
  methods: {
    handleClick(idx) {
      this.visible[idx] = !this.visible[idx];
    },

    closePopover(idx){
      this.visible[idx]=false;
    }
  }
};
</script>

上述代码片段展示了如何利用索引来构建独特的 `ref` 并控制各自的可见性状态。每当按钮触发点击事件时，只会影响对应位置上的 `el-popover` 显示与否。

- **优化 CSS 样式以适应不同场景下的布局需求**

针对可能出现的内容过长情况，可以通过自定义类名的方式调整 `.popover-content` 的最大高度以及添加滚动条属性，使得即使有大量文本也能良好呈现而不会破坏整体界面美观度。

<style scoped lang="scss">
.custom-popper .popover-content {
  max-height: 150px;
  overflow-y: auto;
}
</style>

此段 SCSS 定义了一个名为 `custom-popper` 的额外类用于包裹实际的 Popover 内容区域，在这里设置了最大高度限制和垂直方向自动滚动生成机制。