“

大家好，我是雄雄，歡迎關注微信公眾號：雄雄的小課堂。

”

前幾天做了個功能，需求是使用利用element ui如何給下拉列表分頁，經過網上查找，自己摸索，已經完成，今天來記錄一下吧。

實現的效果

image-20211103160459223

當時因為下拉框中的數據過多，所以想到使用分頁的方式來實現。

現在來看看具體的實現吧。

準備分頁的組件

分頁組件的代碼是從網上拼湊的，代碼如下：

<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: {//此參數只是為了父組件實現 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.length<1){this.childSelectedValue = '';}}},mounted(){},methods:{//子組件分頁器，頁碼選擇事件，父組件中監聽子組件的 pageNationChange 事件，獲取當前頁碼changeNumber(val){//此處的val是頁碼this.$emit("pageNationChange",val);},// 遠程調用方法，在父組件中實現遠程方法remoteMethod(val){if(val!=null && val.length>0){//只有輸入的字符串長度大于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.length<1){this.childSelectedValue = ''}}} } </script><style scoped></style>

關鍵代碼都有注釋，所以這里就不過多解釋。直接放到項目中即可使用，下面再來看看怎么使用。

父組件的寫法

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

<!--添加人員 --><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為下拉列表分頁的點擊事件，執行的方法如下：

//下拉列表分頁的點擊的事件pageNationChange(val){//設置當前頁為點擊的頁this.setSelectPage.currentPage = val;//重新調用分頁查詢的方法this.getAthListLocal(this.setSelectPage);},

change為下拉列表選項的改變事件，執行方法如下：

//獲取下拉框中的運動員編號--保存方案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;},

因為我需要把值和名稱都存在數據庫中，所以這里需要根據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.length===0){this.athListAllPaged=data.records;}else {//追加數據for(let i = 0;i<data.records.length;i++){this.athListAllPaged.push(data.records[i]);}}});},

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

最后的效果就實現了。

image-20211103161711255

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。