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

Typescript node.js css html javascript

Dec.28,2021

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.

Previous: When vue uses elementUI's dialog pop-up window, there is a delay problem?

Next: Xorm cannot augment itself by using Sqlite3 to drive the primary key.

Ask for a tag plug-in similar to palm reading to recommend the winner 100.
app needs to realize the function of taking notes and marking when reading. Now the front end needs to cooperate to write this function. Please recommend a plug-in ....

Typescript node.js css html javascript

Oct.28,2021