Scrollbar组件指南https://element-plus.org/zh-CN/component/scrollbar1、安装配置 element-plus请参考vue3elementplussass/scss安装配置教程使用svg图标、引入外部字体、定义变量模块、修改组件样式、一键切换主题等2、封装组件!-- src/components/LoadmoreList.vue --templatedivclassloadmore_list!-- 滚动容器 --el-scrollbar:heightheightend-reachedhandleEndReachedv-ifdata.length!-- 若作为选择器下拉列表 --templatev-ifisOptionel-optionv-foritem in data:keyitem.value:labelitem.label:valueitem.value//template!-- 若作为可勾选列表 --el-checkbox-groupv-modelcheckValueschangehandleCheckValuesChangev-else-ifdefaultChecksel-checkboxv-foritem in data:keyitem.value:labelitem.label:valueitem.valuechangebool handleChange(bool, item.value)//el-checkbox-group!-- 普通列表 --templatev-elsepv-foritem in data:keyitem.value{{ item.label }}/p/template!-- 加载动画 --Transitionnamefademodeout-indivclassloading_boxv-ifloadingel-iconclassis-loadingLoading//el-icon加载中……/div/Transition/el-scrollbar!-- 空白显示 --divclassempty_box:style{height: height, line-height: height}v-loadingloadingv-else暂无数据/div!-- 可勾选列表附加栏 --divclassflex_boxv-ifdefaultChecks!-- 全选框 --el-checkboxv-modelcheckAll:indeterminateindeterminate:disabledloadingchangehandleCheckAllChangev-ifdata.length data.length total全选/el-checkbox!-- 总数 --span共 {{ total }} 条/span/div/div/templatescriptexportdefault{props:{api:String,//接口名称必填params:Object,//请求参数scrollHeight:Number,//滚动容器高度isOption:Boolean,//是否作为选择器下拉框defaultChecks:Array,//默认勾选项若作为可勾选列表},data(){return{height:this.scrollHeight?this.scrollHeightpx:150px,//默认高度150pxdata:[],//列表数据total:0,//列表总数currentPage:0,//当前页码checkValues:[],//已勾选项组checkValuesStore:[],//已勾选项组暂存loading:false,//是否加载中checkAll:false,//是否全选indeterminate:false,//是否中间状态}},computed:{//根据容器高度计算每页条数默认行高34pxpageSize(){returnthis.scrollHeight?Math.floor(this.scrollHeight/34)5:10},},watch:{//监听默认勾选项更新defaultChecks(newVal,oldVal){if(newVal){this.handleCheckValuesChange(newVal)}},},created(){this.loadData(1)//载入首页数据if(this.defaultChecks){this.handleCheckValuesChange(this.defaultChecks)//填充默认勾选项}},methods:{//根据页码加载列表数据loadData(page){this.currentPagepage//当标记不为0if(page){this.loadingtrue//请求首页时重置列表if(page1){this.data[]this.total0}//按需调整请求参数constparamsthis.params??{}params[currentPage]this.currentPage params[pageSize]this.pageSize//调用接口获取数据示例this.$api[this.api]({onSuccess:(data){if(data?.list?.length){//整理新数据并追加到列表constnewDatadata.list.map(item{return{value:item.id,label:item.name,}})this.data.push(newData)this.totaldata.totalif(this.data.lengththis.total){this.currentPage0//若所有数据已加载完毕标记为0}else{this.currentPage//否则翻页}}},onFinally:(){this.loadingfalse},},params)}},//滚动到底部时触发加载handleEndReached(direction){if(directionbottomthis.currentPage!this.loading){this.loadData(this.currentPage)}},//勾选项变化时handleCheckValuesChange(values){this.checkValuesvalues//同步全选及中间状态if(values.length){this.checkAllthis.data.every(itemvalues.includes(item.value))this.indeterminate!this.checkAllthis.data.some(itemvalues.includes(item.value))}else{this.checkAllfalsethis.indeterminatefalse}this.checkValuesStorethis.checkValues//更新暂存},//单个勾选/取消勾选handleChange(bool,value){constcheckedListthis.data.filter(itemthis.checkValues.includes(item.value))//触发check事件并传递参数当前选中列表取消勾选项组this.$emit(check,checkedList,bool?[]:[value])},//全选/全不选handleCheckAllChange(bool){this.checkValuesbool?this.data.map(itemitem.value):[]this.indeterminatefalse//触发check事件并传递参数当前选中列表取消勾选项组if(bool){this.$emit(check,structuredClone(this.data),[])}else{this.$emit(check,[],structuredClone(this.checkValuesStore))}this.checkValuesStorethis.checkValues//更新暂存},//重置为初始状态reset(){this.loadingfalsethis.checkAllfalsethis.indeterminatefalsethis.checkValues[]this.data[]this.total0this.currentPage0},},}/scriptstylelangscss.loadmore_list{.el-scrollbar{padding:6px 0;}.el-checkbox{vertical-align:bottom;.el-checkbox__input, .el-checkbox__label{vertical-align:text-top;white-space:nowrap;}}.el-checkbox-group{.el-checkbox{display:table-row;height:34px;line-height:34px;margin:0;}}.loading_box{width:100%;height:38px;line-height:38px;text-align:center;color:#A8ABB2;}.empty_box{width:100%;text-align:center;color:#A8ABB2;}.flex_box{display:flex;align-items:center;width:100%;justify-content:space-between;}}/style接口封装请参考vue3axios挑战最简洁实用的配置封装接口调用请求拦截器、响应拦截器、通用请求方法单个请求/并发请求/下载文件、统一接口管理3、全局注册组件也可在应用时按需引入/* src/main.js */import{createApp}fromvue;importAppfrom./App.vue;//导入组件importLoadmoreListfrom./components/LoadmoreList.vue;//import MoreComponent from ./components/MoreComponent.vue;constappcreateApp(App);//注册组件app.component(LoadmoreList,LoadmoreList);//app.component(MoreComponent, MoreComponent)app.mount(#app)4、应用组件!-- Example.vue --template!-- 全局注册后可直接使用 LoadmoreList / --!-- 作为选择器下拉列表 --el-selectv-modelvalueplaceholder请选择LoadmoreListapiexample_url_a:paramsparamsis-option//el-select!-- 作为可勾选列表 --LoadmoreListapiexample_url_b:default-checkscheckIdscheckhandleCheck/!-- 作为普通列表 --LoadmoreListapiexample_url_c:scroll-height416refLoadmoreListRef//templatescript//或按需引入组件仅此页面生效importLoadmoreListfrom/components/LoadmoreList.vueexportdefault{components:{LoadmoreList,//注册组件仅此页面生效},data(){return{value:,params:{search:example,},checkIds:[1,2,3],}},methods:{//当触发勾选事件时进行操作handleCheck(checkList,removeIds){//checkList-当前已勾选的列表数据removeIds-本次取消勾选的ID组console.log(checkList,removeIds)//若需重置列表可调用组件内部的reset方法this.$refs.LoadmoreListRef.reset()},},}/script