“

大家好，我是雄雄，歡迎關(guān)注微信公眾號(hào)：雄雄的小課堂。

”

前幾天做了個(gè)功能，需求是使用利用element ui如何給下拉列表分頁(yè)，經(jīng)過(guò)網(wǎng)上查找，自己摸索，已經(jīng)完成，今天來(lái)記錄一下吧。

實(shí)現(xiàn)的效果

image-20211103160459223

當(dāng)時(shí)因?yàn)橄吕蛑械臄?shù)據(jù)過(guò)多，所以想到使用分頁(yè)的方式來(lái)實(shí)現(xiàn)。

現(xiàn)在來(lái)看看具體的實(shí)現(xiàn)吧。

準(zhǔn)備分頁(yè)的組件

分頁(yè)組件的代碼是從網(wǎng)上拼湊的，代碼如下：

<template><el-select v-model="childSelectedValue":filterable="remote"multiple:loading="loading":remote="remote":size="size":remote-method="remoteMethod":clearable="clearable"@change="handleChange"@clear="handleClear"@focus="handleFocus":style="{width: '93%'}":placeholder="placeholder"><el-optionv-for="item in optionSource":key="item[valueKey]":label="item[labelKey]":value="item[valueKey]"></el-option><el-paginationsmalllayout="prev, pager, next"@current-change="changeNumber":hide-on-single-page="true":page-size="paginationOption.pageSize":current-page="paginationOption.currentPage":pager-count="paginationOption.pagerCount":total="paginationOption.total"></el-pagination></el-select> </template><script>export default {name: 'PaginationSelect',props: {//此參數(shù)只是為了父組件實(shí)現(xiàn) v-model指令接受參數(shù)用，子組件中無(wú)實(shí)際意義// 在子組件中通過(guò)監(jiān)聽(tīng)childSelectedValue值，來(lái)觸發(fā) input 事件，實(shí)現(xiàn)子父組件數(shù)據(jù)綁定value:{type:String,default: ''},valueKey:{//傳入的option數(shù)組中，要作為最終選擇項(xiàng)的鍵值名稱type:String},labelKey:{//傳入的option數(shù)組中，要作為顯示項(xiàng)的鍵值名稱type:String},clearable :{//是否支持清除，默認(rèn)支持type:Boolean,default:true},remote:{//是否支持遠(yuǎn)程搜索，默認(rèn)支持type:Boolean,default:false},size:{//組件尺寸，配置項(xiàng)同select String | medium/small/minitype:String,default:'medium'},loading:{//遠(yuǎn)程數(shù)據(jù)加載狀態(tài)顯示type:Boolean,default:false},placeholder :{type:String,default:'給誰(shuí)用'},optionSource:{//下拉框組件數(shù)據(jù)源type:Array,required:true},paginationOption:{//分頁(yè)配置項(xiàng)type:Object,default:function () {return {pageSize:5,//每頁(yè)顯示條數(shù) 6條剛好currentPage:1,//當(dāng)前頁(yè)pagerCount:5,//按鈕數(shù)，超過(guò)時(shí)會(huì)折疊total:10 //總條數(shù)}}}},data () {return {childSelectedValue:this.value,}},watch:{//監(jiān)聽(tīng)子組件中選擇的值得變化，每當(dāng)選擇一個(gè)項(xiàng)后，觸發(fā)input事件，// 將子組件中選擇的值通過(guò)input事件傳遞給父組件，實(shí)現(xiàn)父組件中v-model綁定的值的雙向綁定childSelectedValue(val){this.$emit("input",val);},value(val){if(val!=null && val.length<1){this.childSelectedValue = '';}}},mounted(){},methods:{//子組件分頁(yè)器，頁(yè)碼選擇事件，父組件中監(jiān)聽(tīng)子組件的 pageNationChange 事件，獲取當(dāng)前頁(yè)碼changeNumber(val){//此處的val是頁(yè)碼this.$emit("pageNationChange",val);},// 遠(yuǎn)程調(diào)用方法，在父組件中實(shí)現(xiàn)遠(yuǎn)程方法remoteMethod(val){if(val!=null && val.length>0){//只有輸入的字符串長(zhǎng)度大于1時(shí)，觸發(fā)this.$emit("remote-method",val);}else{this.childSelectedValue = ' '}},//使組件支持change事件handleChange(val){this.$emit("change",val);},//使組件支持clear事件handleClear(val){this.$emit("clear",val);},//解決遠(yuǎn)程搜索無(wú)結(jié)果時(shí)，顯示清除按鈕問(wèn)題handleFocus(){if(this.childSelectedValue.length<1){this.childSelectedValue = ''}}} } </script><style scoped></style>

關(guān)鍵代碼都有注釋，所以這里就不過(guò)多解釋。直接放到項(xiàng)目中即可使用，下面再來(lái)看看怎么使用。

父組件的寫(xiě)法

父組件中的代碼，網(wǎng)上不全，基本上都是自己整理的，首先在需要寫(xiě)下拉列表的地方寫(xiě)：

<!--添加人員 --><el-form-item label="選擇人員" ><pagination-select@pageNationChange="pageNationChange"@change="getAthIdsAdd":optionSource="athListAllByLocal"v-model="fanganform.pbeizhu"labelKey="aname"valueKey="id":paginationOption="setSelectPage"></pagination-select></el-form-item>

pageNationChange為下拉列表分頁(yè)的點(diǎn)擊事件，執(zhí)行的方法如下：

//下拉列表分頁(yè)的點(diǎn)擊的事件pageNationChange(val){//設(shè)置當(dāng)前頁(yè)為點(diǎn)擊的頁(yè)this.setSelectPage.currentPage = val;//重新調(diào)用分頁(yè)查詢的方法this.getAthListLocal(this.setSelectPage);},

change為下拉列表選項(xiàng)的改變事件，執(zhí)行方法如下：

//獲取下拉框中的運(yùn)動(dòng)員編號(hào)--保存方案getAthIdsAdd(val){var names = "";for(let i=0;i<=val.length-1;i++){this.athListAllPaged.find((item)=>{if(item.id === val[i]){names+=item.aname+",";}});}console.log(names);this.fanganform.ppersons = names;},

因?yàn)槲倚枰阎岛兔Q都存在數(shù)據(jù)庫(kù)中，所以這里需要根據(jù)id來(lái)遍歷一下name的值。

optionSource為下拉列表中的數(shù)據(jù)源。

paginationOption為分頁(yè)的屬性，代碼如下：

//分頁(yè)信息setSelectPage:{pageSize:6,//每頁(yè)顯示條數(shù) 3條剛好currentPage:1,//當(dāng)前頁(yè)pagerCount:5,//按鈕數(shù)，超過(guò)時(shí)會(huì)折疊total:0 //總條數(shù)},

分頁(yè)查詢信息的代碼如下：

//查詢本地的運(yùn)動(dòng)員getAthListLocal(setSelectPage){getListAthPage(setSelectPage.currentPage,setSelectPage.pageSize).then(res => {const data = res.data.data;//下拉列表數(shù)據(jù)源綁定this.athListAllByLocal =data.records;//綁定總記錄數(shù)this.setSelectPage.total = data.total;//if(this.athListAllPaged.length===0){this.athListAllPaged=data.records;}else {//追加數(shù)據(jù)for(let i = 0;i<data.records.length;i++){this.athListAllPaged.push(data.records[i]);}}});},

如果需要更改分頁(yè)的的按鈕數(shù)和頁(yè)大小，可以直接修改setSelectPage中的pageSize和pagerCount即可。

最后的效果就實(shí)現(xiàn)了。

image-20211103161711255

總結(jié)

以上是生活随笔為你收集整理的vue使用element ui实现下拉列表分页的功能！！！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。