已知现有20个div容器，每个div容器具有一个独特的id，且每个id对应一个属性很多的对象数组，如何让这20个容器使用统一的内容，列如“负责人： 工艺负责人： 工位编号：” 并根据div容器的id，动态将数组中的某3个属性数据填入到上述类容中，且在el-popover中的显示

要在Vue应用中实现这个功能，你可以创建一个组件（比如`ContentCard`），然后利用v-for循环遍历对象数组，为每个div容器渲染对应的卡片。这里有一个简单的例子：

首先，定义一个`ContentCard.vue`组件：

<template>
  <div class="content-card" :key="item.id">
    <h3>负责人:</h3>
    <p v-if="item.responsibility">{{ item.responsibility }}</p>
    
    <h3>工艺负责人:</h3>
    <p v-if="item.process_responsible">{{ item.process_responsible }}</p>

    <h3>工位编号:</h3>
    <p v-if="item.workstation_number">{{ item.workstation_number }}</p>
    
    <el-popover placement="top-start" trigger="hover">
      <template slot-content>
        <span>{{ item.popoverContent }}</span>
      </template>
      <button slot="reference">查看详情</button>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
    popoverContent: {
      type: String,
      // 这里假设你已经获取到了需要展示的具体内容
      default: "更多详细信息",
    },
  },
};
</script>

然后，在父组件（例如`App.vue`）中，你需要初始化对象数组并传给子组件：

<template>
  <div id="app">
    <div v-for="(item, index) in items" :key="index" :ref="'card_' + index">
      <ContentCard :item="item" />
    </div>
  </div>
</template>

<script>
import ContentCard from './components/ContentCard.vue';

export default {
  data() {
    return {
      items: [
        // 假设这是你的20个对象数组，每个对象都有responsibility、process_responsible和workstation_number属性
        { ... },
        { ... },
        ...
        { ... },
      ],
    };
  },
  components: {
    ContentCard,
  },
};
</script>

确保你已经在项目中安装了Element UI库，因为我们在用到`el-popover`组件。

现在，当你悬停在任何一个卡片上时，对应的Popover就会显示预设的“更多详细信息”文本或其他自定义内容。每个卡片的内容会根据传递给`item`对象的属性动态填充。