el-select下拉框選項太多導致卡頓，使用下拉框分頁來解決

el-select下拉框的選項太多時會卡頓，影響體驗，使用下拉框選項分頁來解決，即elementUI的分頁插件和el-select插件組合使用

效果

我這里有個el-input輸入框做模糊查詢

<el-select v-model="form.kmdm" style="width: 320px">
                <el-input
                  v-model="inputVal"
                  :clearable="true"
                  v-on:input="filterKm(inputVal)"
                  style="width: 50%"
                  placeholder="科目代碼(名稱)模糊查詢"
                />
                <el-pagination
                  background
                  :page-sizes="[kms.length, 20, 40, 60, 80, 100, 200, 500]"
                  :page-size="pageSize2"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="kms.length"
                  :current-page.sync="currentPage2"
                  @current-change="onCurrentKms"
                  @size-change="handleSizeChange2"
                  small
                />
                <el-option
                  v-for="(it, index) in selectKms"
                  :key="index"
                  :label="`${it.code}(${it.name})`"
                  :value="it.code"
                ></el-option>
              </el-select>

<script>
import {
  get as httpGet,
} from "@/request";


export default {
  data() {
    return {
      form: {
        kmdm: "",
      },
      allKms: [],//存放后端傳到前端的所有數據
      kms: [],//下拉框顯示的總數據
      selectKms: [],//下拉框當前頁顯示的數據
      pageSize2: 20,
      currentPage2: 1,
      inputVal: "",
      rules: {
        kmdm: [
          {
            required: true,
            message: "請選擇科目代碼（名稱）",
            trigger: "change",
          },
        ],
      },
    };
  },
created() {},
methods: {
    handleSizeChange2(size) {
      this.pageSize2 = size;
      this.onCurrentKms(1);
    },
    onCurrentKms(page) {
      this.currentPage2 = page;
      if (this.kms.length > 0) {
        if (page * this.pageSize2 <= this.kms.length) {
          this.selectKms = this.kms.slice(
            (page - 1) * this.pageSize2,
            page * this.pageSize2
          );
        } else {
          this.selectKms = this.kms.slice(
            (page - 1) * this.pageSize2,
            this.kms.length
          );
        }
      } else {
        this.selectKms = [];
      }
    },
   filterKm(value) {
      if (value) {
        this.kms = this.allKms.filter(
          (x) => x.name.includes(value) || x.code.includes(value)
        );
      } else {
        this.kms = this.allKms;
      }
      this.onCurrentKms(1);
    },
};
</script>