Vue下拉框加分頁(yè)搜索功能的實(shí)現(xiàn)方法
前言:開(kāi)發(fā)任務(wù)中有這樣一個(gè)需求,下拉框中需要展示超過(guò)5000條數(shù)據(jù),甚至更多。這數(shù)據(jù)量直接整個(gè)頁(yè)面卡死了,就想到在下拉框中加分頁(yè),實(shí)現(xiàn)方式有如下兩種:
方式一:使用elementui中的el-select和el-pagination實(shí)現(xiàn)分頁(yè)
HTML部分:
<el-select
v-model="value1"
placeholder="請(qǐng)選擇數(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="請(qǐng)輸入"
>
</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)前頁(yè)碼的數(shù)據(jù)
value1: "", //輸入框的值
currentpage: 1, //當(dāng)前頁(yè)碼
pageSize: 10, //每頁(yè)展示的條數(shù)
};
},
methods: {
//分頁(yè)的實(shí)現(xiàn),currentpage 為頁(yè)碼,每頁(yè)展示的數(shù)據(jù)為10(可自行更改pageSize)條,分別是在總數(shù)據(jù)options中
//下標(biāo)從(currentpage -1)*10開(kāi)始的十條數(shù)據(jù)
handleCurrentChange(val) {
this.optionfen = [];
this.currentpage = val;
let start = (val - 1) * this.pageSize;
let end = Number(start) + Number(this.pageSize);
//此處需要判斷如果計(jì)算的結(jié)束下標(biāo)大于總數(shù)據(jù)的長(zhǎng)度,則需要修改結(jié)束下標(biāo)
if (end > this.options.length) {
end = this.options.length;
}
for (let i = start; i < end; i++) {
//將取到的數(shù)據(jù)展示在頁(yè)面
this.optionfen.push(this.options[i]);
}
},
};方式二:使用v-selectpage組件實(shí)現(xiàn)分頁(yè)搜索
v-selectpage官方文檔地址:https://terryz.gitee.io/vue/#/selectpage/demo
步驟:
1.安裝v-selectpage依賴
npm install v-selectpage@2.1.4 -save
2.在main.js中注冊(cè)到Vue實(shí)例中
import vSelectPage from 'v-selectpage'
Vue.use(vSelectPage, {
language: 'cn',
placeholder: '請(qǐng)選擇數(shù)據(jù)'
})3.在index.vue頁(yè)面中使用
<v-selectpage :data="options" v-model="value" show-field="name" key-field="value"></v-selectpage> //其他的屬性參考官方文檔
注意:v-selectpage不僅可以實(shí)現(xiàn)下拉框單選還可以實(shí)現(xiàn)多線、表格等功能點(diǎn),具體的去官網(wǎng)查看
到此這篇關(guān)于Vue下拉框加分頁(yè)搜索的文章就介紹到這了,更多相關(guān)vue下拉框分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題
下面小編就為大家分享一篇解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
淺談Vue開(kāi)發(fā)人員的7個(gè)最好的VSCode擴(kuò)展
這篇文章主要介紹了淺談Vue開(kāi)發(fā)人員的7個(gè)最好的VSCode擴(kuò)展,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue Router動(dòng)態(tài)路由使用方法總結(jié)
這篇文章主要介紹了Vue Router動(dòng)態(tài)路由使用方法總結(jié),需要的朋友可以參考下2023-10-10
vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法
今天小編就為大家分享一篇vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

