Vue下拉框加分頁搜索功能的實現(xiàn)方法
前言:開發(fā)任務(wù)中有這樣一個需求,下拉框中需要展示超過5000條數(shù)據(jù),甚至更多。這數(shù)據(jù)量直接整個頁面卡死了,就想到在下拉框中加分頁,實現(xiàn)方式有如下兩種:
方式一:使用elementui中的el-select和el-pagination實現(xiàn)分頁
HTML部分: <el-select v-model="value1" placeholder="請選擇數(shù)據(jù)" :clearable="false" style="width: 240px" size="mini" filterable :filter-method="filter" > <el-option v-for="item in optionfen" :key="item.value" :label="item.value" remote :value="item.label" placeholder="請輸入" > </el-option> <div style="bottom: -10px"> <el-pagination small @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pageSize" layout="prev, pager,next,total" :total="options.length" > </el-pagination> </div> </el-select> JS部分 export default { data() { return { options: [], //總數(shù)據(jù) optionfen: [], //當(dāng)前頁碼的數(shù)據(jù) value1: "", //輸入框的值 currentpage: 1, //當(dāng)前頁碼 pageSize: 10, //每頁展示的條數(shù) }; }, methods: { //分頁的實現(xiàn),currentpage 為頁碼,每頁展示的數(shù)據(jù)為10(可自行更改pageSize)條,分別是在總數(shù)據(jù)options中 //下標(biāo)從(currentpage -1)*10開始的十條數(shù)據(jù) handleCurrentChange(val) { this.optionfen = []; this.currentpage = val; let start = (val - 1) * this.pageSize; let end = Number(start) + Number(this.pageSize); //此處需要判斷如果計算的結(jié)束下標(biāo)大于總數(shù)據(jù)的長度,則需要修改結(jié)束下標(biāo) if (end > this.options.length) { end = this.options.length; } for (let i = start; i < end; i++) { //將取到的數(shù)據(jù)展示在頁面 this.optionfen.push(this.options[i]); } }, };
方式二:使用v-selectpage組件實現(xiàn)分頁搜索
v-selectpage官方文檔地址:https://terryz.gitee.io/vue/#/selectpage/demo
步驟:
1.安裝v-selectpage依賴
npm install v-selectpage@2.1.4 -save
2.在main.js中注冊到Vue實例中
import vSelectPage from 'v-selectpage' Vue.use(vSelectPage, { language: 'cn', placeholder: '請選擇數(shù)據(jù)' })
3.在index.vue頁面中使用
<v-selectpage :data="options" v-model="value" show-field="name" key-field="value"></v-selectpage> //其他的屬性參考官方文檔
注意:v-selectpage不僅可以實現(xiàn)下拉框單選還可以實現(xiàn)多線、表格等功能點,具體的去官網(wǎng)查看
到此這篇關(guān)于Vue下拉框加分頁搜索的文章就介紹到這了,更多相關(guān)vue下拉框分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決
這篇文章主要介紹了關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue使用mpegts.js實現(xiàn)播放flv的直播視頻流
這篇文章主要為大家詳細(xì)介紹了vue如何使用mpegts.js實現(xiàn)播放flv的直播視頻流,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01Vue tagsview實現(xiàn)多頁簽導(dǎo)航功能流程詳解
基本上后臺管理系統(tǒng)都需要有多頁簽的功能,但是因為一些腳手架項目基本都把這個功能給集成好了,導(dǎo)致在學(xué)習(xí)或者修改的時候不知道該如何下手。今天這篇文章就來聊一聊,vue-element-admin項目是如何實現(xiàn)多頁簽功能的2022-09-09vue報錯Error:Cannot?find?module?'fs/promises'的解決方
最近的項目需要用到vue/cli,但是用cnpm安裝vue/cli的時候報錯了,下面這篇文章主要給大家介紹了關(guān)于vue報錯Error:Cannot?find?module?'fs/promises'的解決方式,需要的朋友可以參考下2022-11-11