背景
最近项目中需要制作一个下拉滚动分页的功能（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。
需求功能
1.数据量大了就页面渲染缓慢从而卡顿严重，为了解决这个问题，对element-ui进行了改造，el-select改为分页滚动加载。
2.数据量大时下拉可以分页滚动加载，而且可以支持原来的搜索。
设计开发
先说一下我的开发环境版本：
node: v11.3.0
npm: 6.4.1
vue：2.5.11
如果不是以上版本也没关系，今日分享的思路，相信你可以自己造出来~
1.先写html页面：
- {{store.storeName}}
- {{$t('pageinfo.nosearchdata')}}
2.给html加对应的css：
.selectBox{
width: 200px;
height: 26px;
position: relative;
.icon{
position: absolute;
right: 10px;
top:10px;
color:#C0C4CC;
transition: all 0.5s;
font-size: 14px;
&.arrowtop{
transition: all 0.5s;
transform: rotate(-180deg);
}
}
.dropdown{
position: absolute;
top:40px;
z-index: 999;
min-width: 200px;
background: #fff;
border: 1px solid #E4E7ED;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 8px 0 2px;
.el-select-dropdown .el-scrollbar {padding-bottom: 17px;}
.contentMore{
width: 200px;
height:250px;
}
ul{
box-sizing: border-box;
display: block;
margin-bottom: 12px;
li{
font-size: 14px;
position: relative;
white-space: nowrap;
padding: 5px 16px;
overflow: hidden;
text-overflow: ellipsis;
color: #606266;
height: 34px;
line-height: 26px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
text-align: left;
&:hover{
background: #F5F7FA;
}
&.selected{
color: #0062B2;
font-weight: 700;
}
}
}
.arrow{
position: absolute;
top: -6px;
left: 35px;
margin-right: 3px;
border-bottom-color: #EBEEF5;
border-width: 6px;
-webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
&:after{
content: " ";
border-width: 6px;
position: absolute;
display: block;
width: 0;
height: 0;
服务器托管网 border-color: transparent;
border-style: solid;
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #FFF;
}
}
}
input{
-webkit-appearance: none;
width: 100%;
height:100%;
border:1px solid #DCDFE6;
outline: 0;
border-radius: 2px;
text-indent: 16px;
transition: all 0.5s;
cursor: pointer;
/*background: #F5F7FA;*/
color: #606266;
font-size: 12px;
background: rgba(255,255,255,0.1);
&:hover{
border:1px solid #C0C4CC;
}
&:focus{
border:1px solid #0062B2;
}
&:active{
border:1px solid #C0C4CC;
}
&:visited{
border:1px solid #0062B2;
}
input::-webkit-input-placeholder{
color:#C0C4CC;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:#C0C4CC;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:#C0C4CC;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:#C0C4CC;
}
}3.对应的js：
//获取焦点打开
showdropbox(){
this.$refs.searchInput.setAttribute("placeholder",JSON.parse(JSON.stringify(this.selectData.storeName)));
this.selectData ={};
this.showdrop = true;
this.changeSelect = false; //未选择值
this.loadPage.currentPage = 1;
this.storeidlist = JSON.parse(JSON.stringify(this.storeidlistall.slice(0,this.loadPage.pageSize)));
},
//元素外的点击（）替代离焦事件，解决点击选择冲突
handleClose(){
setTimeout(()=>{
//console.log('外外外外外外');
this.showdrop = false;
if( !this.changeSelect ){
this.selectData =JSON.parse(JSON.stringify(this.SelectValue));
}
},50);
},
//失去焦点
closedropbox(){
/*setTimeout(()=>{
console.log('失去焦点')
this.showdrop = false;
if( !this.changeSelect ){
this.selectData =JSON.parse(JSON.stringify(this.SelectValue));
}
},250);*/
},
//点击选择并关闭下拉
selectOne(one){
console.log('选择');
this.selectData = JSON.parse(JSON.stringify(one));
this.showdrop = false;
this.changeSelect = true; //已选择值
setTimeout(()=>{
this.SelectValue = JSON.parse(JSON.stringify(this.selectData));
this.$emit('changedata',JSON.parse(JSON.stringify(this.selectData)).storeId);
},10)
},
//输入的值
selectInput(val){
//console.log('搜索',val,this.$refs.searchInput.value);
//this.loadTextBox = false;
if(this.$refs.searchInput.value){
this.storeidlist = [];
this.storeidlist = this.storeidlistall.filter((one)=>{
if(one.storeName.indexOf(this.$refs.searchInput.value)>-1 || String(one.externalStoreId).indexOf(this.$refs.searchInput.value)>-1){
return true;
}
});
let total = this.storeidlistall.length;
this.loadPage.currentPage = Math.ceil(total/this.loadPage.pageSize) ; //页码大于最大值则无需滚动加载
}else{
this.loadPage.currentPage = 1;
this.storeidlist = JSON.parse(JSON.stringify(this.storeidlistall.slice(0,this.loadPage.pageSize)));
}
/*setTimeout(()=>{
this.loadTextBox = true; //解决滚动条不会跟着内容变化的问题
},100);*/
},
//分页请求load
load () {
console.log('load');
let total = this.storeidlistall.length;
if(total/this.lo服务器托管网adPage.pageSize以上就是放element-ui制作的升级版，下拉搜索+分页滚动的组件啦:
写在最后
如果本文中有bug、逻辑错误，或者您有更好的优化方案欢迎评论联系我哦！~关注我持续分享日常工作中的组件设计和学习分享，一起进步加油！
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
