element ui select 分页时候怎么回显名字

### Element UI Select 组件分页回显选项名字实现 为了实现在 `Element UI` 的 `el-select` 组件中分页并且回显已选择项的名字，可以自定义一个组件 `ElSelectLoading.vue` 并将其插入到 `el-select` 菜单的底部。此方案利用了 `IntersectionObserver` 来检测组件是否进入视口，并在满足条件时触发加载更多数据的操作[^1]。 当涉及到回显已经选择了的数据名称时，则需确保每次页面刷新或重新渲染时能够正确恢复之前的选择状态。这通常意味着要保存所选项目的标识符以及它们对应的标签（即显示给用户的文本），以便可以在初始化时设置这些值作为默认选定项。 下面是一个具体的例子展示如何做到这一点： #### HTML/Template 部分 ```html <template> <div> <!-- 使用 v-model 绑定 selectedOptions --> <el-select v-model="selectedOptions" multiple filterable remote :remote-method="loadData" placeholder="请选择"> <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"/> <!-- 加载更多的提示 --> <li style="text-align:center;" @click="fetchMore()" v-if="hasMore">点击加载更多</li> </el-select> </div> </template> ``` #### Script 部分 (Vue.js) ```javascript <script> export default { data() { return { options: [], // 存储获取到的所有可选项 allLoaded: false, loading: false, query: '', pageSize: 10, currentPage: 1, totalItems: 0, selectedOptions: [] // 已经被选中的项目集合 }; }, methods: { async loadData(queryString) { this.query = queryString; const response = await fetch(`/api/items?search=${queryString}&page=1&size=${this.pageSize}`); let { items } = await response.json(); // 更新本地存储的状态 this.options = items.map(item => ({ value: item.id, label: item.name })); this.totalItems = /* 获取总数 */; this.currentPage = 1; // 设置初始状态下应该被选中的条目 if(this.selectedValues){ this.setInitialSelections(items); } }, setInitialSelections(allItems){ this.selectedOptions.forEach(value=>{ const selectedItem=allItems.find(i=>i.id===value); if(selectedItem)this.$refs.selectRef.setSelectedValue({id:value,name:selectedItem.name}); }); }, async fetchMore(){ if (!this.hasMore || this.loading) return; try{ this.loading=true; ++this.currentPage; const response = await fetch(`/api/items?page=${this.currentPage}&size=${this.pageSize}`); let {items} =await response.json(); this.options.push(...items.map(item => ({ value:item.id,label:item.name })) ); this.loading=false; }catch(error){console.error('Failed to load more:', error);} } }, computed:{ hasMore(){return this.currentPage * this.pageSize < this.totalItems;} } }; </script> ``` 在这个示例里，每当用户输入查询字符串或者首次访问该控件的时候都会调用 `loadData()` 方法来请求服务器端的数据；而当滚动到底部时则会执行 `fetchMore()` 函数以追加新的记录至现有的列表之中。同时，在初次加载完成后还会尝试根据已有选择情况调整界面显示的内容。 对于回显部分来说，关键是维护好两个地方的信息同步：一个是界面上实际呈现出来的选项列表 (`options`) ，另一个则是内部跟踪哪些已经被标记为“选中”的对象(`selectedOptions`). 当有预设的选择存在时，可以通过对比服务端返回的结果集找到匹配的对象并将之加入到当前显示区域内的选项当中去。