element ui 的popover 搭配v-for 遍历的效能问题

Question

小弟在进行专案时只用element ui 的popover遇到了一个问题

列表中的每一项都要有一个相应的popover?

但发现如果列表有100项 这个popover生成的节点就有100个

担心这会对效能造成问题

<ul class="rooms m-b" v-if="showing.length">

        <li v-for="(item, index) in showing"

          :key="index">

        <el-popover

          placement="right"

          trigger="click">

          <div>

            <div class="action pointer" @click="enterChat(item)">與 {{item.username}} 談話</div>

            <div class="action pointer" @click="handleChatClick(item)">查看 {{item.username}}</div>

          </div>

          <div class="meta" slot="reference">

            <span class="title">

              <span>{{ item.username }}</span>

            </span>

          </div>

          </el-popover>

        </li>

      </ul>

不知有没有共用一个节点内容的方法(只生成一个节点, 或是需要时才渲染当个popover的方法)

我的代碼

Answer 1

这样循环肯定是这样的你可以提出来，用坐标来控制，每次点击对应按钮的时候，显示popover，并更改坐标为按钮的位置