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

Question

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

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

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

担心这会对效能造成问题

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

我的代碼

<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>

有人也遇过一样的问题吗 跪求提供思路方法了

Answer 1

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

Answer 2

可以参考这个el-popover在v-for 循环中的使用与优化来实现，
实际测试在el-table中使用，单独出来后渲染就不卡顿了。