el-select下拉框選項太多導致卡頓,使用下拉框分頁來解決
阿新 • • 發佈:2020-10-26
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>