欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue下拉框加分頁(yè)搜索功能的實(shí)現(xiàn)方法

 更新時(shí)間:2022年11月24日 16:27:36   作者:別拿曾經(jīng)看以后~  
開(kāi)發(fā)任務(wù)中有這樣一個(gè)需求,下拉框中需要展示超過(guò)5000條數(shù)據(jù),甚至更多,這數(shù)據(jù)量直接整個(gè)頁(yè)面卡死了,就想到在下拉框中加分頁(yè),下面小編通過(guò)實(shí)例代碼介紹下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)文章

  • 關(guān)于iview和elementUI組件樣式覆蓋無(wú)效問(wèn)題及解決

    關(guān)于iview和elementUI組件樣式覆蓋無(wú)效問(wèn)題及解決

    這篇文章主要介紹了關(guān)于iview和elementUI組件樣式覆蓋無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue使用mpegts.js實(shí)現(xiàn)播放flv的直播視頻流

    vue使用mpegts.js實(shí)現(xiàn)播放flv的直播視頻流

    這篇文章主要為大家詳細(xì)介紹了vue如何使用mpegts.js實(shí)現(xiàn)播放flv的直播視頻流,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下
    2024-01-01
  • vue中異步函數(shù)async和await的用法說(shuō)明

    vue中異步函數(shù)async和await的用法說(shuō)明

    這篇文章主要介紹了vue中異步函數(shù)async和await的用法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • VUE中Non-Props屬性的使用

    VUE中Non-Props屬性的使用

    本文主要介紹了VUE中Non-Props屬性的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • vue3中不支持.sync語(yǔ)法糖的解決方法

    vue3中不支持.sync語(yǔ)法糖的解決方法

    在 Vue 3 中,.sync 修飾符已經(jīng)被移除,在 Vue 2 中,.sync 修飾符是一個(gè)語(yǔ)法糖,用于簡(jiǎn)化子組件和父組件之間的雙向數(shù)據(jù)綁定,那么本文將給大家介紹一下vue3中不支持.sync語(yǔ)法糖的解決方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-01-01
  • vue打包terser壓縮去除控制臺(tái)打印和斷點(diǎn)過(guò)程

    vue打包terser壓縮去除控制臺(tái)打印和斷點(diǎn)過(guò)程

    這篇文章主要介紹了vue打包terser壓縮去除控制臺(tái)打印和斷點(diǎn)過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue-cli3打包時(shí)圖片壓縮處理方式

    vue-cli3打包時(shí)圖片壓縮處理方式

    這篇文章主要介紹了vue-cli3打包時(shí)圖片壓縮處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue中將網(wǎng)頁(yè)打印成pdf實(shí)例代碼

    vue中將網(wǎng)頁(yè)打印成pdf實(shí)例代碼

    本篇文章主要介紹了vue中將網(wǎng)頁(yè)打印成pdf實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • Vue tagsview實(shí)現(xiàn)多頁(yè)簽導(dǎo)航功能流程詳解

    Vue tagsview實(shí)現(xiàn)多頁(yè)簽導(dǎo)航功能流程詳解

    基本上后臺(tái)管理系統(tǒng)都需要有多頁(yè)簽的功能,但是因?yàn)橐恍┠_手架項(xiàng)目基本都把這個(gè)功能給集成好了,導(dǎo)致在學(xué)習(xí)或者修改的時(shí)候不知道該如何下手。今天這篇文章就來(lái)聊一聊,vue-element-admin項(xiàng)目是如何實(shí)現(xiàn)多頁(yè)簽功能的
    2022-09-09
  • vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方式

    vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方

    最近的項(xiàng)目需要用到vue/cli,但是用cnpm安裝vue/cli的時(shí)候報(bào)錯(cuò)了,下面這篇文章主要給大家介紹了關(guān)于vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方式,需要的朋友可以參考下
    2022-11-11

最新評(píng)論