SoFunction
Updated on 2025-04-06

Implementation of Vue drop-down box plus paging search function

Preface: There is such a requirement in the development task, and more than 5,000 pieces of data need to be displayed in the drop-down box, or even more. This data volume is directly stuck on the entire page, so I thought of adding paging to the drop-down box. There are two ways to implement it:

Method 1: Use el-select and el-pagination in elementui to implement pagination

HTMLpart：
    <el-select
      v-model="value1"
      placeholder="Please select data"
      :clearable="false"
      style="width: 240px"
      size="mini"
      filterable
      :filter-method="filter"
    >
      <el-option
        v-for="item in optionfen"
        :key=""
        :label=""
        remote
        :value=""
        placeholder="Please enter"
      >
      </el-option>
      <div style="bottom: -10px">
        <el-pagination
          small
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          :page-size="pageSize"
          layout="prev, pager,next,total"
          :total=""
        >
        </el-pagination>
      </div>
    </el-select>

JSpart
export default {
  data() {
    return {
      options: [],  //Total data      optionfen: [],  //The data of the current page number      value1: "",  //Input the value of the box      currentpage: 1,   //Current page number      pageSize: 10,   //Number of displayed items per page    };
  },
  methods: {
  //The implementation of pagination, currentpage is the page number, and the data displayed on each page is 10 (pageSize can be changed by yourself), which are in the total data options respectively  //Subscript ten data starting from (currentpage -1)*10    handleCurrentChange(val) {
       = [];
       = val;
      let start = (val - 1) * ;
      let end = Number(start) + Number();
      //It is necessary to determine here that if the calculated end subscript is greater than the length of the total data, the end subscript needs to be modified.      if (end > ) {
        end = ;
      }
      for (let i = start; i < end; i++) {
      //Show the retrieved data on the page        ([i]);
      }
    },
};

Method 2: Use the v-selectpage component to implement pagination search

v-selectpage official document address:/vue/#/selectpage/demo
step:
1. Install v-selectpage dependency

npm install [email protected] -save

2. Register in Vue instance

import vSelectPage from 'v-selectpage'
(vSelectPage, {
   language: 'cn',
   placeholder: 'Please select data'
 })

3. Use it in the page

<v-selectpage :data="options" v-model="value" show-field="name" key-field="value"></v-selectpage>
//For other attributes, please refer to the official documentation

Note: v-selectpage can not only implement single selection of drop-down boxes, but also implement multi-line, table and other functional points. For details, go to the official website to view it.

This is the article about Vue drop-down box plus page search. For more related content on vue drop-down box paging, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!