处理 Element UI 中Popover组件会在页面中出现多个的情况

在Element UI中，Popover组件通常用于显示浮动的内容，如提示信息、选项列表等。如果你需要在页面上展示多个Popover，可能会遇到以下情况：

1. **数据驱动**: 如果你的数据源包含多个需要展示Popover的元素，比如表格行或列表项，你可以在每个元素上绑定一个Popover，并通过数据的变化动态显示对应的内容。

<template>
  <el-table-column prop="title" label="标题">
    <template slot-scope="scope">
      <el-popover :content="scope.row.popoverContent" placement="bottom">
        {{ scope.row.content }}
      </el-popover>
    </template>
  </el-table-column>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'item1', content: '内容1', popoverContent: '这是item1的提示' },
        { title: 'item2', content: '内容2', popoverContent: '这是item2的提示' }
      ]
    };
  }
};
</script>

2. **事件触发**: 你可以为每个元素设置一个点击或悬停事件，触发对应的Popover显示。例如，在按钮或链接上添加`@click`事件：

<el-button v-for="(item, index) in items" :key="index" @click="showPopover(index)">
  {{ item.title }}
</el-button>

<template #popover(index)>
  <el-popover :ref="'popover' + index" :placement="position" width="200">
    {{ items[index].popoverContent }}
  </el-popover>
</template>
<script>
export default {
  methods: {
    showPopover(index) {
      this.$refs['popover' + index].doShow();
    }
  }
};
</script>