摄影网站导航,关键词在线听免费,网站销售如何做业绩,python做网站 jsp“大家好#xff0c;我是雄雄#xff0c;欢迎关注微信公众号#xff1a;雄雄的小课堂。”前几天做了个功能#xff0c;需求是使用利用element ui如何给下拉列表分页#xff0c;经过网上查找#xff0c;自己摸索#xff0c;已经完成#xff0c;今天来记录一下吧。实现的… “大家好我是雄雄欢迎关注微信公众号雄雄的小课堂。”前几天做了个功能需求是使用利用element ui如何给下拉列表分页经过网上查找自己摸索已经完成今天来记录一下吧。实现的效果image-20211103160459223当时因为下拉框中的数据过多所以想到使用分页的方式来实现。现在来看看具体的实现吧。准备分页的组件分页组件的代码是从网上拼凑的代码如下templateel-select v-modelchildSelectedValue:filterableremotemultiple:loadingloading:remoteremote:sizesize:remote-methodremoteMethod:clearableclearablechangehandleChangeclearhandleClearfocushandleFocus:style{width: 93%}:placeholderplaceholderel-optionv-foritem in optionSource:keyitem[valueKey]:labelitem[labelKey]:valueitem[valueKey]/el-optionel-paginationsmalllayoutprev, pager, nextcurrent-changechangeNumber:hide-on-single-pagetrue:page-sizepaginationOption.pageSize:current-pagepaginationOption.currentPage:pager-countpaginationOption.pagerCount:totalpaginationOption.total/el-pagination/el-select
/templatescriptexport default {name: PaginationSelect,props: {//此参数只是为了父组件实现 v-model指令接受参数用子组件中无实际意义// 在子组件中通过监听childSelectedValue值来触发 input 事件实现子父组件数据绑定value:{type:String,default: },valueKey:{//传入的option数组中要作为最终选择项的键值名称type:String},labelKey:{//传入的option数组中要作为显示项的键值名称type:String},clearable :{//是否支持清除默认支持type:Boolean,default:true},remote:{//是否支持远程搜索默认支持type:Boolean,default:false},size:{//组件尺寸配置项同select String | medium/small/minitype:String,default:medium},loading:{//远程数据加载状态显示type:Boolean,default:false},placeholder :{type:String,default:给谁用},optionSource:{//下拉框组件数据源type:Array,required:true},paginationOption:{//分页配置项type:Object,default:function () {return {pageSize:5,//每页显示条数 6条刚好currentPage:1,//当前页pagerCount:5,//按钮数超过时会折叠total:10 //总条数}}}},data () {return {childSelectedValue:this.value,}},watch:{//监听子组件中选择的值得变化每当选择一个项后触发input事件// 将子组件中选择的值通过input事件传递给父组件实现父组件中v-model绑定的值的双向绑定childSelectedValue(val){this.$emit(input,val);},value(val){if(val!null val.length1){this.childSelectedValue ;}}},mounted(){},methods:{//子组件分页器页码选择事件父组件中监听子组件的 pageNationChange 事件获取当前页码changeNumber(val){//此处的val是页码this.$emit(pageNationChange,val);},// 远程调用方法在父组件中实现远程方法remoteMethod(val){if(val!null val.length0){//只有输入的字符串长度大于1时触发this.$emit(remote-method,val);}else{this.childSelectedValue }},//使组件支持change事件handleChange(val){this.$emit(change,val);},//使组件支持clear事件handleClear(val){this.$emit(clear,val);},//解决远程搜索无结果时显示清除按钮问题handleFocus(){if(this.childSelectedValue.length1){this.childSelectedValue }}}
}
/scriptstyle scoped/style关键代码都有注释所以这里就不过多解释。直接放到项目中即可使用下面再来看看怎么使用。父组件的写法父组件中的代码网上不全基本上都是自己整理的首先在需要写下拉列表的地方写!--添加人员 --el-form-item label选择人员 pagination-selectpageNationChangepageNationChangechangegetAthIdsAdd:optionSourceathListAllByLocalv-modelfanganform.pbeizhulabelKeyanamevalueKeyid:paginationOptionsetSelectPage/pagination-select/el-form-itempageNationChange为下拉列表分页的点击事件执行的方法如下//下拉列表分页的点击的事件pageNationChange(val){//设置当前页为点击的页this.setSelectPage.currentPage val;//重新调用分页查询的方法this.getAthListLocal(this.setSelectPage);},change为下拉列表选项的改变事件执行方法如下//获取下拉框中的运动员编号--保存方案getAthIdsAdd(val){var names ;for(let i0;ival.length-1;i){this.athListAllPaged.find((item){if(item.id val[i]){namesitem.aname,;}});}console.log(names);this.fanganform.ppersons names;},因为我需要把值和名称都存在数据库中所以这里需要根据id来遍历一下name的值。optionSource为下拉列表中的数据源。paginationOption为分页的属性代码如下//分页信息setSelectPage:{pageSize:6,//每页显示条数 3条刚好currentPage:1,//当前页pagerCount:5,//按钮数超过时会折叠total:0 //总条数},分页查询信息的代码如下//查询本地的运动员getAthListLocal(setSelectPage){getListAthPage(setSelectPage.currentPage,setSelectPage.pageSize).then(res {const data res.data.data;//下拉列表数据源绑定this.athListAllByLocal data.records;//绑定总记录数this.setSelectPage.total data.total;//if(this.athListAllPaged.length0){this.athListAllPageddata.records;}else {//追加数据for(let i 0;idata.records.length;i){this.athListAllPaged.push(data.records[i]);}}});},如果需要更改分页的的按钮数和页大小可以直接修改setSelectPage中的pageSize和pagerCount即可。最后的效果就实现了。image-20211103161711255
