vue popover 所有列表单元格都触发

vue popover 是一个常用的弹出框组件，由于其简单易用、美观实用的特点，在实际开发中被广泛应用。在使用 vue popover 组件时，有时会遇到所有列表单元格都触发的问题。这个问题通常是由于组件触发事件的范围过大，导致所有的列表单元格都受到了影响。

解决这个问题的方法，一种是通过限制组件触发事件的范围，只触发当前单元格的弹出框；另一种是使用 v-for 来循环生成不同的弹出框，并为每个弹出框设置相应的触发事件，从而避免所有列表单元格都触发的问题。

针对第一种方法，可以通过在组件外包裹一层 div ，在该层 div 上设置事件，从而限制组件触发事件的范围。由于事件冒泡机制，点击单元格时会先触发单元格内部的事件，然后再触发外部事件。因此，在外部事件中，可以使用 event.stopPropagation() 方法来阻止事件继续向外传递，实现限定弹出框触发事件的范围。

例如，代码如下：

<template>
  <div @click.stop="showPopover">
    <vue-popover ref="popover">
      <template slot="content">
        弹出框内容
      </template>
      单元格内容
    </vue-popover>
  </div>
</template>

<script>
export default {
  methods: {
    showPopover() {
      this.$refs.popover.show();
    }
  }
}
</script>

在上面的代码中，我们在外层 div 上设置了点击事件，并通过 @click.stop 修饰符阻止了事件的继续传递。这样，当用户点击单元格时，会先触发单元格内部的事件，然后再触发外部的点击事件，但是由于外部事件已经被阻止了传递，因此只会触发此单元格对应的弹出框。

针对第二种方法，可以通过使用 v-for 循环生成多个不同的弹出框，并为每个弹出框设置相应的触发事件，在模板中保证不同弹出框的唯一性，从而避免所有列表单元格都触发的问题。

例如，代码如下：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" @click="showPopover(index)">
      <vue-popover v-if="popoverIndex === index" ref="popover">
        <template slot="content">
          弹出框内容
        </template>
        单元格内容
      </vue-popover>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popoverIndex: -1,
      list: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    showPopover(index) {
      this.popoverIndex = index;
      this.$refs.popover.show();
    }
  }
}
</script>

在上面的代码中，我们使用 v-for 循环生成了多个单元格，并为每个单元格设置了点击事件。在 showPopover 方法中，我们通过传入的 index 标记当前点击的单元格，并利用 Vue 的数据响应机制，使得对应的弹出框显示出来。

综上所述，针对 vue popover 所有列表单元格都触发的问题，我们可以通过限制组件触发事件的范围，或者使用 v-for 循环生成多个不同的弹出框来解决。具体使用哪种方法，可以根据实际情况灵活选择。