perf(消息列表): 使用虚拟列表优化聊天会话列表渲染性能
将普通列表替换为虚拟列表(n-virtual-list),减少DOM节点数量以提升长列表的渲染性能
This commit is contained in:
parent
b956b4ef79
commit
1094b3851f
@ -1146,8 +1146,10 @@ const handleEnterSearchResultChat = () => {
|
||||
<main id="talk-session-list" class="el-main me-scrollbar me-scrollbar-thumb">
|
||||
<template v-if="loadStatus == 2"><Skeleton /></template>
|
||||
<template v-else>
|
||||
<TalkItem
|
||||
v-for="item in items"
|
||||
<n-virtual-list :item-size="64" :items="items">
|
||||
<template #default="{ item }">
|
||||
<TalkItem
|
||||
|
||||
:key="item.index_name + item.unread_num"
|
||||
:data="item"
|
||||
:avatar="item.avatar"
|
||||
@ -1157,6 +1159,8 @@ const handleEnterSearchResultChat = () => {
|
||||
@top-talk="onToTopTalk"
|
||||
@contextmenu.prevent="onContextMenuTalk($event, item)"
|
||||
/>
|
||||
</template>
|
||||
</n-virtual-list>
|
||||
</template>
|
||||
</main>
|
||||
</section>
|
||||
|
Loading…
Reference in New Issue
Block a user