Recently, we have encountered such a demand ,select There is too much data in the drop-down box , The height is very high , Affect the beauty , So here you are select Drop down box to add paging function . Create a new component .

<> First of all HTML part

There's nothing to say here , It can be nested directly
<el-select v-model="value1" placeholder=" Select buried point " :clearable="false" style="width:
240px" size="mini" refs="mySelect" :reserve-keyword="true" filterable
popper-class="sele" :filter-method="filter" @change="fun" @focus="funx" @blur="
funb" @visible-change="hidden" > <el-option v-for="item in optionfen" :key="
item.value" :label="item.value" remote :value="item.label" placeholder=" Please input " >
</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>
<>CSS part
.drop >>> .el-input__inner { background: #5183ff !important; color: white;
border: none; height: 26px; padding: 10px 22px 10px 10px; text-align: center; }
.drop { width: 250px; } .drop >>> .el-select .el-input .el-select__caret {
display: none; }
<>JS part

This is because the data is returned at one time So we realized paging and search by ourselves
export default { data() { return { options: [], // Total data options1: [], // Data searched
optionfen: [], // Data of current page number value1: "", // Enter the value of the box currentpage: 1, // Current page number pageSize: 10
, // Number of entries per page val: "", }; }, props: { // Passing data to the parent component funName: { type: String, require:
true, }, // Receive return value renderingAllKeys: { type: Array, require: true, }, }, computed:
{}, mounted() {}, methods: { // Implementation of paging ,currentpage
Page number , The data displayed on each page is 10( It can be changed at will pageSize) strip , They are in the total data options in // Subscript from (currentpage -1)*10 The first ten data
handleCurrentChange(val) { this.optionfen = []; this.currentpage = val; let
start= (val - 1) * this.pageSize; let end = Number(start) + Number(this.pageSize
); // Here we need to judge if the end subscript of the calculation is greater than the length of the total data , You need to modify the ending subscript if (end > this.options.length) { end =
this.options.length; } for (let i = start; i < end; i++) { // Display the data on the page this.
optionfen.push(this.options[i]); } }, // After selecting the data, the related data is sent to the parent component fun() { let arr = [];
this.val = this.value1; for (let j in this.optionfen) { if (this.value1 == this.
optionfen[j].label) { arr.push(this.optionfen[j]); } } this.$emit(`${this.
funName}`, arr); }, // Get the focus // Jump to the current position when you get the focus value Page number funx() { this.val = this.
value1; let flag = false; for (let i in this.options1) { if (this.options1[i].
label== this.value1) { flag = true; if (i < 10) { this.currentpage = 1; this.
handleCurrentChange(1); } else { let num = Math.floor((i + 10) / 10); this.
currentpage= Number(num); this.handleCurrentChange(Number(num)); } } }
// If not, the first page will be displayed by default if (!flag) { this.currentpage = 1; this.handleCurrentChange(1); }
}, // Lose focus // Each previous operation will input the value Value to store a copy to val in , This is to prevent users from closing the selection box in the middle of a search , At this time, the input box shows
// The user enters half of the value value , With this layer of logic, when the data entered by the user does not exist in the total data ( That is, invalid data ), Close the selection box
// After that, let the input box still display the last correct value value value funb() { this.value1 = this.val; $(".drop >>>
.el-input__inner").css({ color: "white", }); }, hidden(bool) { // hide select list if
(!bool) { // close select Reset page number and data when drop-down box , And remove event monitoring this.optionfen = []; this.options =
this.options1; let start = 0; let end = Number(start) + Number(this.pageSize);
if (end > this.options1.length) { end = this.options1.length; } for (let i =
start; i < end; i++) { this.optionfen.push(this.options1[i]); } //
remove mousedown event listeners removeEventListener("mousedown", function () {}, false); } else
{ // open select list // increase mousedown event listeners Remove the default event from the input box when paging is clicked , So that he doesn't lose focus (blur), If not , It will
// Appears when the user clicks pagination , The input box will lose focus , At this time, if the user needs to enter data for search, he needs to delete the value of the input box before entering it , Bad experience .
//(elementUI The default style of the drop-down box , When searchable, click the input box to input directly , There is no need to delete the last data ) document.addEventListener(
"mousedown", function (e) { // console.log(e) if ( e.target.tagName === "LI" ||
(e.target.tagName == "I" && e.target.localName == "i") ) { e.preventDefault(); }
}, false ); this.funx(); } }, // Search method , Store the data in the options in , And display in pages filter(val) { this.
optionfen= []; this.value1 = val; let arr = []; let value = val.toLowerCase();
for (let i in this.options1) { if (this.options1[i].label.toLowerCase().indexOf(
value) >= 0) { arr.push(this.options1[i]); } } this.options = arr; this.
handleCurrentChange(1); }, }, // Listen for data from parent component , When the data is updated , Reset display watch: { renderingAllKeys
: { // Deep monitoring , Audible objects , Array changes handler(newV) { if(newV.length>0){ this.options1 = newV;
this.options = newV; this.optionfen=[] this.currentpage=1 // Mark reset let start=(this
.currentpage-1)*this.pageSize let end=Number(start)+Number(this.pageSize) if(end
>this.options1.length){ end=this.options1.length } for(let i=start;i<end;i++){
this.optionfen.push(this.options1[i]) } this.value1 = newV[0].label; // Index reset this
.val = newV[0].label; // Index reset this.fun() }else{ this.options1=[] this.options=[]
this.optionfen=[] this.value1="" } }, deep: false, }, }, };
<> The component is used in the parent component

renderingAllKeys Pass the data of the parent component to the child component
<dropdown funName="downBase" :renderingAllKeys="renderingAllKeys" :maxNum="1"
@downBase="getDropdownInfo" />
Used in parent component getDropdownInfo Get data from subcomponents
getDropdownInfo(data) { this.selectTypeArr = data; // Get the data and execute the required logic },
design sketch

Technology
©2019-2020 Toolsou All rights reserved,
Huawei 2021 session Hardware Engineer Logical post (FPGA) Super detailed surface !!!Vue-element-admin upgrade ui edition virtual machine VMware Download and install the most detailed tutorial !C++ Move constructor and copy constructor sound of dripping water java Backstage interview pygame Realize full screen mode and adjustable window size mysql Database setting character set configuration modification my.ini file (windows)30 What's the experience of being a junior programmer at the age of 20 C++ Multithreading programming ( Summary of common functions and parameters )python_ cherry tree