ElementUI-select drop-down box content multi-rendering slow whether paging or how to avoid blur events

select of 1.elementUI supports search and data acquisition at the backend. Now the project manager puts forward the demand, the content of the drop-down box is slow to render, and want to make the content of the drop-down box into paging form.
the backend supports paging
2. After the paging component is added to the front end, it is found that the next page may trigger the blur event, the search content entered in the select input box is cleared, and the drop-down box is folded.
Q:
1, can you page the drop-down box options, click on the next page how to evade the blur event and call the API to re-render the drop-down box data
2, which really cannot be paged? how can you speed up the data request and page rendering and enhance the user experience


I also wanted to do paging functions similar to yours on el-autocomplete before, and I wanted to load more scrollbars by pulling them to the bottom.
cannot be implemented unless changing the source code equals rewriting the component yourself, which is too expensive.

then uses a stupid method: the front end pulls 50 pages at a time, and gets the callback data according to the total field at the back end. If there is more, insert an identification object at the end of the callback array

.
result.push({type: 'more'});

then prompt the user in the template

<template slot-scope="{ item }">
  <template v-if="item.type === 'more'">
    <div class="text-center pad-allm bord-top">
      <a class="text-normal">50</a>
    </div>
  </template>
  <template v-else>
    <goods-item
        size="small"
        :is-router="false"
        :data="item"
    >
    </goods-item>
  </template>
</template>

it turns out that I want to click on this logo to load more, but if I encounter the same problem as you, I can't change it to a hint.


Ha uses the same method as upstairs. Intercept the first n items of the search.
it's a fuzzy search anyway. As long as the input is accurate enough, it can be searched out.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b375c4-2c091.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b375c4-2c091.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?