Declan

主题

期望效果期望效果图 ​

实际效果实际效果图 ​

通常的写法都是直接遍历展示，但是问题就是出现在这 ​

javascript
<div class="b-title-center">
  <el-row>我是标题</el-row>

  <el-row>
    <el-tooltip placement="right">
      <template #content>
        <p v-for="item in formData.persons" :key="item.id">{{ item.name }}｜{{ item.phoneNumber }}</p>
      </template>

      <p v-for="item in formData.persons" :key="item.id">{{ item.name }}｜{{ item.phoneNumber }}</p>
    </el-tooltip>
  </el-row>
</div>

使用el-tooltip组件时，若默认插槽是需要被遍历的数据，需要在父级包裹一个标签才能正常展示默认插槽的数据，否则只会展示被遍历数据的第一项 ​

javascript
<div class="b-title-center">
  <el-row>我是标题</el-row>

  <el-row>
    <el-tooltip placement="right">
      <template #content>
        <p v-for="item in formData.persons" :key="item.id">{{ item.name }}｜{{ item.phoneNumber }}</p>
      </template>

	 <!-- 增加一个包裹的标签即可 -->
      <div>
        <p v-for="item in formData.persons" :key="item.id">{{ item.name }}｜{{ item.phoneNumber }}</p>
      </div>
    </el-tooltip>
  </el-row>
</div>