[Vue] Liste déroulante et recherche de pagination

Préface : Il y a une telle exigence dans la tâche de développement que plus de 5 000 éléments de données doivent être affichés dans la liste déroulante, voire plus. La quantité de données est directement collée sur toute la page, j'ai donc pensé à ajouter la pagination dans la liste déroulante. Il y a deux façons d'y parvenir :

Méthode 1 : Utiliser el-select et el-pagination dans elementui pour réaliser la pagination

HTML部分：
    <el-select
      v-model="value1"
      placeholder="请选择数据"
      :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: [],  //总数据
      optionfen: [],  //当前页码的数据
      value1: "",  //输入框的值
      currentpage: 1,   //当前页码
      pageSize: 10,   //每页展示的条数
    };
  },
  methods: {
    
    
  //分页的实现,currentpage 为页码，每页展示的数据为10（可自行更改pageSize）条，分别是在总数据options中
  //下标从(currentpage -1)*10开始的十条数据
    handleCurrentChange(val) {
    
    
      this.optionfen = [];
      this.currentpage = val;
      let start = (val - 1) * this.pageSize;
      let end = Number(start) + Number(this.pageSize);
      //此处需要判断如果计算的结束下标大于总数据的长度，则需要修改结束下标
      if (end > this.options.length) {
    
    
        end = this.options.length;
      }
      for (let i = start; i < end; i++) {
    
    
      //将取到的数据展示在页面
        this.optionfen.push(this.options[i]);
      }
    },
};

Méthode 2 : Utiliser le composant v-selectpage pour réaliser la recherche de pagination

Adresse du document officiel de v-selectpage : https://terryz.gitee.io/vue/#/selectpage/demo
Étapes :
1. Installez les dépendances de v-selectpage

npm install v-selectpage@2.1.4 -save

2. Enregistrez-vous sur l'instance Vue dans main.js

import vSelectPage from 'v-selectpage'
Vue.use(vSelectPage, {
    
    
   language: 'cn',
   placeholder: '请选择数据'
 })

3. Utilisation dans la page index.vue

<v-selectpage :data="options" v-model="value" show-field="name" key-field="value"></v-selectpage>
//其他的属性参考官方文档

Remarque : v-selectpage peut non seulement réaliser la sélection unique de la liste déroulante, mais également réaliser les points de fonction tels que multi-ligne et formulaire. Pour plus de détails, rendez-vous sur le site officiel pour vérifier