如何让不同的el-popover使用同样的文本内容列如“负责人： 工艺负责人： 工位编号：”，并且文本内容可以动态增加或者修改相应的内容

在 Vue 中，你可以通过组件化的方式复用文本内容，并结合 Vue 的响应式数据和条件渲染来实现这个需求。首先，创建一个自定义的 `PopoverContent` 组件，这个组件接受一个数组或对象作为数据源，用来动态显示内容。

**PopoverContent.vue**

<template>
  <div v-for="(item, index) in items" :key="index">
    <span>{{ item.label }}：</span> {{ item.value }}
    <!-- 如果需要换行，可以添加 <br /> -->
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      // 假设默认值是一个空数组，实际项目中根据需要填充
      default: () => [],
    },
  },
};
</script>

然后在父组件（比如 Popover 组件）中，你可以传递不同的数据到 `PopoverContent` 组件：

**Popover.vue**

<template>
  <el-popover ref="popover" placement="top">
    <PopoverContent :items="customFields"></PopoverContent>
  </el-popover>
</template>

<script>
import PopoverContent from './PopoverContent.vue';

export default {
  components: {
    PopoverContent,
  },
  data() {
    return {
      customFields: [
        { label: '负责人', value: '张三' },
        { label: '工艺负责人', value: '李四' },
        { label: '工位编号', value: '001' },
      ],
      // 可以在这里动态改变 fields 数组来更新内容
      dynamicFields: [], // 或者使用一个对象数组，例如 [{label: '新字段', value: '新的值'}]
    };
  },
  methods: {
    updateFields(newFields) {
      this.customFields = newFields;
      // 或者直接更新动态Fields数组
      this.dynamicFields = newFields;
    },
  },
};
</script>

在这个例子中，`customFields` 是静态的数据，而 `dynamicFields` 则可以在外部通过调用 `updateFields` 方法进行动态修改。每个 `PopoverContent` 都会显示对应的 `label` 和 `value` 对应的内容。