如何让el-popover容器中显示templateString: ‘负责人: {{ item.role1 }}\n工艺负责人: {{ item.role2 }}\n工位编号: {{ item.position }}\n’, };

要在一个 Vue 的 `el-popover` 容器中动态渲染模板字符串，你可以使用 `v-bind` 或者更简洁的 `:` 来绑定数据属性。在这个例子中，你需要确保 `item` 对象包含 `role1`, `role2`, 和 `position` 属性。

首先，在你的组件模板中引入 `el-popover` 组件并设置其 `ref`，例如：

<template>
  <div>
    <!-- 其他内容 -->
    <el-popover ref="popover" placement="top">
      <p v-bind:text="templateString"></p> <!-- 或者用 :text="templateString" -->
    </el-popover>
  </div>
</template>

然后，在你的 script 部分，定义 `templateString` 数据属性，并根据需要更新它：

<script>
export default {
  data() {
    return {
      item: { role1: '', role2: '', position: '' }, // 假设这是你的数据
      templateString: '负责人: {{ item.role1 }}\n工艺负责人: {{ item.role2 }}\n工位编号: {{ item.position }}', // 初始化时的模板字符串
    };
  },
  // 如果 item 中的数据有变化，可以在这里处理（如 computed、watch 或者方法）
  methods: {
    updateTemplateData(newItem) {
      this.item = newItem; // 更新 item 对象
      this.templateString = '负责人: {{ item.role1 }}\n工艺负责人: {{ item.role2 }}\n工位编号: {{ item.position }}'; // 或者直接用计算属性
    },
  },
};
</script>

当你需要更新 `item` 对象的值时，调用 `updateTemplateData` 方法。这样，`el-popover` 中的内容就会根据 `item` 的实时数据进行更新了。