[TOC] ### 方法一：分成两份来展示，一份显示出来，一份隐藏掉，点击加载全部在把隐藏的显示出来 <img src="https://img.tnblog.net/arcimg/notebook/42f0803eabc04bb88ce8c489687f65c7.png" style="width:299px;height:auto;"> 封装的组件的代码如下： ``` <template> <div class="completeUerList-container"> <div class="cu-ct-title"> {{ props.title }} </div> <div class="cu-ct-users"> <div class="cu-ct-us-item" v-for="(item, index) in state.firstUsers" :key="index"> <img class="cu-ct-us-head" src="https://image.tnblog.net/dbc68332d521436c983fbc3adc6d9c7f.jpeg" /> <div class="cu-ct-us-name"> 成都标榜：闵杨 <!-- <div class="cu-ct-us-spline"></div> --> </div> </div> <div class="cu-ct-us-item" v-show="state.isShowMore" v-for="(item, index) in state.remainingUsers" :key="index"> <img class="cu-ct-us-head" src="https://image.tnblog.net/dbc68332d521436c983fbc3adc6d9c7f.jpeg" /> <div class="cu-ct-us-name">成都标榜：闵杨</div> </div> </div> <div class="cu-ct-more" v-if="completeuCount > 10 && !state.isShowMore"> <div class="cuct-wrap" @click="loadMore"> 加载全部<el-icon size="16"><ArrowDownBold class="cuct-wrap-icon" /></el-icon> </div> </div> </div> </template> <script setup lang="ts" name="CompleteUerList"> import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue' import { ArrowDownBold } from '@element-plus/icons-vue' const props = defineProps({ title: { type: String, default: '已完成任务' }, completeUsers: { type: [] as any, default: [] } }) const state = reactive({ firstUsers: [], remainingUsers: [], isShowMore: false }) const completeuCount = ref(0) onMounted(() => { completeuCount.value = props.completeUsers.length if (completeuCount.value > 10) { // 分成两份来展示，默认显示10条 state.firstUsers = props.completeUsers.slice(0, 10) state.remainingUsers = props.completeUsers.slice(10) } else{ state.firstUsers = props.completeUsers } }) // 加载更多，让另外一份隐藏的显示出来 const loadMore = () => { state.isShowMore = true } </script> <style scoped="scoped" lang="scss"> .completeUerList-container { .cu-ct-title { font-family: Microsoft YaHei; font-weight: 600; font-size: 16px; color: #292f3d; } .cu-ct-users { margin-top: 15px; .cu-ct-us-item:last-child { border-bottom: none; padding-bottom: 0px; } .cu-ct-us-item { display: flex; align-items: center; margin-bottom: 10px; border-bottom: solid 1px #f7f7f7; padding-bottom: 10px; cursor: pointer; .cu-ct-us-head { width: 28px; height: 28px; border-radius: 50%; } .cu-ct-us-name { font-family: Microsoft YaHei; font-weight: 400; font-size: 14px; color: #60646e; line-height: 26px; margin-left: 15px; } .cu-ct-us-spline { height: 1px; background: #f7f7f7; width: 300px; margin-top: 10px; } } } .cu-ct-more { margin-top: 13px; margin-bottom: 7px; text-align: center; font-family: Microsoft YaHei; font-weight: 400; font-size: 14px; color: #1880ff; .cuct-wrap { display: flex; align-items: center; justify-content: center; cursor: pointer; .cuct-wrap-icon { margin-left: 5px; } } } } </style> ``` 对这个组件的使用： ``` <template> <div class="teacher-training-container"> <CompleteUerList title="已完成任务" :completeUsers=state.completeUsers></CompleteUerList> </div> </template> <script setup lang="ts" name="teacher-training-details"> const CompleteUerList = defineAsyncComponent(() => import('/@/components/CompleteUerList.vue')) const state = reactive({ // 模拟提供数据源 completeUsers:function(){ let users = [] for (let index = 0; index < 16; index++) { users.push({name:index}) } return users }(), }) </script> ``` #### 增加了一个是否显示全部的配置IsShowAll ``` <template> <div class="completeUerList-container"> <div class="cu-ct-title"> {{ props.title }} </div> <div class="cu-ct-users"> <div class="cu-ct-us-item" v-for="(item, index) in state.firstUsers" :key="index"> <img class="cu-ct-us-head" src="https://image.tnblog.net/dbc68332d521436c983fbc3adc6d9c7f.jpeg" /> <div class="cu-ct-us-name"> 成都标榜：闵杨 </div> </div> <div class="cu-ct-us-item" v-show="state.isShowMore" v-for="(item, index) in state.remainingUsers" :key="index"> <img class="cu-ct-us-head" src="https://image.tnblog.net/dbc68332d521436c983fbc3adc6d9c7f.jpeg" /> <div class="cu-ct-us-name">成都标榜：闵杨</div> </div> </div> <div class="cu-ct-more" v-if="completeuCount > 10 &&!IsShowAll && !state.isShowMore"> <div class="cuct-wrap" @click="loadMore"> 加载全部<el-icon size="16"><ArrowDownBold class="cuct-wrap-icon" /></el-icon> </div> </div> </div> </template> <script setup lang="ts" name="CompleteUerList"> import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue' import { ArrowDownBold } from '@element-plus/icons-vue' const props = defineProps({ title: { type: String, default: '已完成任务' }, IsShowAll: { type: Boolean, default: false }, completeUsers: { type: [] as any, default: [] } }) const state = reactive({ firstUsers: [], remainingUsers: [], isShowMore: false }) const completeuCount = ref(0) onMounted(() => { completeuCount.value = props.completeUsers.length if (completeuCount.value > 10 && props.IsShowAll===false) { state.firstUsers = props.completeUsers.slice(0, 10) state.remainingUsers = props.completeUsers.slice(10) } else{ state.firstUsers = props.completeUsers } }) const loadMore = () => { state.isShowMore = true } </script> <style scoped="scoped" lang="scss"> .completeUerList-container { .cu-ct-title { font-family: Microsoft YaHei; font-weight: 600; font-size: 16px; color: #292f3d; } .cu-ct-users { margin-top: 15px; .cu-ct-us-item:last-child { border-bottom: none; padding-bottom: 0px; } .cu-ct-us-item { display: flex; align-items: center; margin-bottom: 10px; border-bottom: solid 1px #f7f7f7; padding-bottom: 10px; cursor: pointer; .cu-ct-us-head { width: 28px; height: 28px; border-radius: 50%; } .cu-ct-us-name { font-family: Microsoft YaHei; font-weight: 400; font-size: 14px; color: #60646e; line-height: 26px; margin-left: 15px; } .cu-ct-us-spline { height: 1px; background: #f7f7f7; width: 300px; margin-top: 10px; } } } .cu-ct-more { margin-top: 13px; margin-bottom: 7px; text-align: center; font-family: Microsoft YaHei; font-weight: 400; font-size: 14px; color: #1880ff; .cuct-wrap { display: flex; align-items: center; justify-content: center; cursor: pointer; .cuct-wrap-icon { margin-left: 5px; } } } } </style> ``` 使用 ``` <CompleteUerList title="已完成任务" :IsShowAll="false" :completeUsers=state.completeUsers></CompleteUerList> ``` ### 方法二：固定高度的实现方式 <img src="https://img.tnblog.net/arcimg/notebook/d9eb48e0a4584f36a8c5898bc743fc34.png" style="width:560px;height:auto;"> tn2>实现思路：给一个固定高度然后设置一个超高就出现滚动条，点击加载全部的时候就把那个固定高度的样式去掉即可。 **实现代码** 直接复制进去就可以用了。 ``` <template> <div class="ai-case-tinking-container"> <div class="ac-cc-area"> <div class="ac-cc-title">正在思考</div> <div class="ac-think-body"> <div class="ac-think-content" v-bind:class="{ 'ac-think-content-height': isFixedHeight }"> 1. 案例名称：立法听证会护航未成年人网络权益 基本信息 预期效果：树立规则意识与创新竞争观 来源：财政部新能源汽车推广应用补助公示（2025年第1批）、海关总署进出口数据 背景：2025年美国对华电动汽车征收45%关税背景下，我国车企通过技术授权模式进背景：2026年美国对华电动汽车征收45%关税背景下，我国车企通过技术授权模式进 </div> <div class="ac-think-more" v-if="isFixedHeight" @click="loadAll">展开全部<el-icon><ArrowDown /></el-icon></div> </div> </div> </div> </template> <script setup lang="ts" name="tasks"> import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue' const isFixedHeight = ref(true) const loadAll = () =>{ isFixedHeight.value = false } onMounted(() => { isFixedHeight.value = true }) </script> <style scoped="scoped" lang="scss"> .ai-case-tinking-container { padding: 15px 15px 15px 15px; .ac-cc-title { height: 50px; background: #f8f9fb; border-radius: 4px 4px 0px 0px; border: 1px solid #edeff3; line-height: 50px; padding-left: 20px; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 16px; color: #30373d; } .ac-think-body { margin-top: 15px; padding: 15px 0px 15px 0px; background: #f6f7fb; border-radius: 10px 10px 10px 10px; .ac-think-content-height{ height: 96px; } .ac-think-content { font-family: PingFang SC, PingFang SC; padding-left: 15px; padding-right: 15px; font-weight: 400; font-size: 13px; color: #30373d; // height: 96px; overflow-y: auto; line-height: 25px; } } .ac-think-more { // width: 489px; height: 29px; background: linear-gradient(180deg, #f6f7fb 0%, #d4e9ff 100%); border-radius: 0px 0px 10px 10px; cursor: pointer; text-align: center; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 12px; line-height: 29px; color: #1890ff; display: flex; justify-content: center; align-items: center; } } </style> ```