滚动加载 避免全部加载 耗光浏览器内存

src/views/qw/externalContactTransfer/index.vue

@@ -175,13 +175,30 @@
       <el-table-column label="描述信息" align="center" prop="description" />
       <el-table-column label="标签" align="center" prop="tagIds" width="300px">
         <template slot-scope="scope">
-          <div class="tag-container">
+          <div class="tag-container" 
+               :ref="'tagContainer_' + scope.row.id" 
+               @scroll="handleTagScroll(scope.row, $event)"
+               v-if="getTagCount(scope.row) > 0">
             <div class="tag-list">
-              <div v-for="i in JSON.parse(scope.row.tagIds)" :key="i" style="display: inline;">
-              <el-tag type="success" v-for="ii in tagList" :key="ii.id" style="margin: 3px;" v-if="ii.tagId==i">{{ii.name}}</el-tag>
-              </div>
+              <el-tag 
+                v-for="(tag, tagIndex) in getVisibleTags(scope.row)" 
+                :key="'tag_' + scope.row.id + '_' + tagIndex" 
+                type="success" 
+                style="margin: 3px;"
+              >
+                {{ tag }}
+              </el-tag>
+              <el-tag 
+                v-if="hasMoreTags(scope.row)" 
+                type="info" 
+                style="margin: 3px; cursor: pointer;"
+                @click="loadMoreTags(scope.row)"
+              >
+                展开更多 ({{ getRemainingTagCount(scope.row) }})
+              </el-tag>
             </div>
           </div>
+          <span v-else style="color: #909399;">无标签</span>
         </template>
       </el-table-column>
       <el-table-column label="客户等级" align="center" prop="level" width="120px" >
@@ -359,6 +376,8 @@ export default {
       tagList:[],
       transferStatusOptions:[],
       statusOptions:[],
+      // 每个用户显示的标签数量，key为用户ID，value为显示的标签数量
+      userTagDisplayCount: {},
       // 表单校验
       rules: {
         userId: [{ required: true, message: '请选择接替员工', trigger: 'blur' }],
@@ -419,9 +438,84 @@ export default {
       listExternalContact(this.queryParams).then(response => {
         this.externalContactList = response.rows;
         this.total = response.total;
+        // 初始化每个用户的标签显示数量为10
+        this.externalContactList.forEach(item => {
+          if (!this.userTagDisplayCount[item.id]) {
+            this.$set(this.userTagDisplayCount, item.id, 10);
+          }
+        });
         this.loading = false;
       });
     },
+    /** 获取可见的标签列表 */
+    getVisibleTags(row) {
+      if (!row.tagIds) return [];
+      try {
+        const tagIds = JSON.parse(row.tagIds);
+        const displayCount = this.userTagDisplayCount[row.id] || 10;
+        const visibleTagIds = tagIds.slice(0, displayCount);
+        
+        // 根据tagId从tagList中查找标签名称
+        const visibleTags = [];
+        visibleTagIds.forEach(tagId => {
+          const tag = this.tagList.find(t => t.tagId == tagId);
+          if (tag) {
+            visibleTags.push(tag.name);
+          }
+        });
+        return visibleTags;
+      } catch (e) {
+        return [];
+      }
+    },
+    /** 判断是否有更多标签 */
+    hasMoreTags(row) {
+      if (!row.tagIds) return false;
+      try {
+        const tagIds = JSON.parse(row.tagIds);
+        const displayCount = this.userTagDisplayCount[row.id] || 10;
+        return tagIds.length > displayCount;
+      } catch (e) {
+        return false;
+      }
+    },
+    /** 获取剩余标签数量 */
+    getRemainingTagCount(row) {
+      if (!row.tagIds) return 0;
+      try {
+        const tagIds = JSON.parse(row.tagIds);
+        const displayCount = this.userTagDisplayCount[row.id] || 10;
+        return tagIds.length - displayCount;
+      } catch (e) {
+        return 0;
+      }
+    },
+    /** 加载更多标签 */
+    loadMoreTags(row) {
+      const currentCount = this.userTagDisplayCount[row.id] || 10;
+      // 每次加载10个
+      this.$set(this.userTagDisplayCount, row.id, currentCount + 10);
+    },
+    /** 获取标签总数 */
+    getTagCount(row) {
+      if (!row.tagIds) return 0;
+      try {
+        const tagIds = JSON.parse(row.tagIds);
+        return tagIds.length;
+      } catch (e) {
+        return 0;
+      }
+    },
+    /** 处理标签容器滚动事件 */
+    handleTagScroll(row, event) {
+      const container = event.target;
+      // 如果滚动到底部，自动加载更多（每次加载10个）
+      if (container.scrollHeight - container.scrollTop <= container.clientHeight + 5) {
+        if (this.hasMoreTags(row)) {
+          this.loadMoreTags(row);
+        }
+      }
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -562,17 +656,17 @@ export default {
 </script>
 <style  scoped>
 .tag-container {
-  max-height: 300px;
+  max-height: 120px;
   overflow-y: auto;
-  padding: 1px;
+  padding: 5px;
   border: 1px solid #ebeef5;
-  border-radius: 1px;
+  border-radius: 4px;
   background-color: #fafafa;
 }
 .tag-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 5px;
 }
 .scroll-hint {
   text-align: center;