设置数据列表在数量超过6时从第7个数据开始折叠并设置展开/折叠行样式。1、修改响应式引用对象为“rankList”而非修改前的全部数据对象view classrank-row v-for(item, index) in displayList :keyitem.tenantId text classrank-col rank-name{{ item.tenantName }}/text text classrank-col rank-num{{ item.memberNum }}/text /view2、模板部分template !-- 原部分不变 -- !-- 展开/收起按钮数据超过X条时显示 -- view v-ifrankList.length 6 classrank-toggle clicktoggleExpand text classrank-toggle-text {{ isExpanded ? 收起 : 展开全部 }} /text text classrank-toggle-icon{{ isExpanded ? ▲ : ▼ }}/text /view /template3、样式部分const isExpanded ref(false) // 展开/收起状态 // 计算显示的列表 const displayList computed(() { if (isExpanded.value || rankList.value.length 6){ // 展开/数据少于X条,显示全部 return rankList.value } else { // 折叠,只显示前X条 return rankList.value.slice(0, 6) } }) // 切换展开/收起 const toggleExpand () { isExpanded.value !isExpanded.value }4、数据网格部分.rank-row { display: flex; align-items: center; padding: 24rpx 20rpx; border-bottom: 1rpx solid #f5f5f5; :last-child { border-bottom: none; // 最后一行移除底部边框 } :hover { background: #f8f9fc; // 鼠标悬停时改变背景色提升交互体验 } } // 展开/收起按钮样式 .rank-toggle { display: flex; align-items: center; justify-content: center; padding: 20rpx 0; margin-top: 10rpx; cursor: pointer; transition: all 0.3s ease; :hover { border-radius: 0 0 8rpx 8rpx; // 悬停时底部圆角 } :active { transform: scale(0.98); // 点击时轻微缩小 } } //展开/收起按钮的文字样式 .rank-toggle-text { font-size: 14px; color: #3c96f3; font-weight: 500; margin-right: 8rpx; } //箭头图标的样式带有过渡动画 .rank-toggle-icon { font-size: 12px; color: #3c96f3; transition: transform 0.3s ease; display: inline-block; } //所有列的通用样式 .rank-col { font-size: 14px; color: #333; }