前言

一個(gè)基于 Vue 3 + Element Plus 的 <el-select> 封裝組件：支持遠(yuǎn)程搜索、分頁(yè)加載（無(wú)限加載/觸底加載）、可選緩存與可選回顯（detailApi），適合“遠(yuǎn)程大數(shù)據(jù)下拉選擇”的場(chǎng)景。

• npm：www.npmjs.com/package/sel…
• GitHub：github.com/qiongyuxili…

1. 安裝

npm i select-pagination-element-plus

2. 快速開(kāi)始（最小可用）

下面示例展示最基本用法：輸入關(guān)鍵詞 → 遠(yuǎn)程查詢 → 下拉觸底繼續(xù)加載。

<template>
  <SelectPagination v-model="value" :api="fetchUsers" placeholder="輸入關(guān)鍵詞搜索" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SelectPagination from 'select-pagination-element-plus'

const value = ref('')

const fetchUsers = async (params: any) => {
  // params 內(nèi)默認(rèn)會(huì)包含：page、size、name（可配置）
  // 你也可以通過(guò)組件 props.params 傳額外查詢參數(shù)

  // 約定返回結(jié)構(gòu)：默認(rèn) responsePath = "data.data"
  // responsePath 指向的對(duì)象必須包含：
  // - content: 選項(xiàng)數(shù)組
  // - totalElements: 總數(shù)量
  return {
    data: {
      data: {
        content: [
          { id: 'u-1', label: '用戶 1', value: 'u-1' },
          { id: 'u-2', label: '用戶 2', value: 'u-2' }
        ],
        totalElements: 2
      }
    }
  }
}
</script>

3. 后端返回結(jié)構(gòu)（responsePath）

組件會(huì)通過(guò) responsePath 在響應(yīng)對(duì)象中定位分頁(yè)數(shù)據(jù)，默認(rèn)：

• responsePath = "data.data"

該路徑最終需要指向一個(gè)對(duì)象，且至少包含：

{
  content: any[]
  totalElements: number
}

3.1 示例：后端返回是{ data: { list, total } }

你可以這么配置：

<SelectPagination
  v-model="value"
  :api="fetchUsers"
  response-path="data"
/>

并確保 fetchUsers 返回里 data 對(duì)象包含 content/totalElements，或者你在 fetchUsers 內(nèi)轉(zhuǎn)換成統(tǒng)一結(jié)構(gòu)。

4. 參數(shù)說(shuō)明（Props 字段含義）

4.1 數(shù)據(jù)與行為

4.2 字段映射（label/value）

例如你的后端返回 [{ userId, userName }]，可以：

<SelectPagination
  v-model="value"
  :api="fetchUsers"
  label-field="userName"
  value-field="userId"
/>

4.3 分頁(yè)與搜索參數(shù)（發(fā)給后端的字段名）

舉例：默認(rèn)請(qǐng)求參數(shù)類似：

{
  page: 1,
  size: 10,
  name: "張"
}

如果你的后端是 current/limit/keyword：

<SelectPagination
  v-model="value"
  :api="fetchUsers"
  page-key="current"
  size-key="limit"
  keyword="keyword"
/>

4.4 響應(yīng)路徑

4.5 緩存（提高體驗(yàn)，減少重復(fù)請(qǐng)求）

緩存適用場(chǎng)景：下拉多次分頁(yè)加載后關(guān)閉再打開(kāi)，希望還停留在上次加載的結(jié)果與位置。

4.6 回顯與詳情（detailApi / changeDetail）

典型場(chǎng)景：表單編輯頁(yè)從后端拿到 userId，但下拉列表還沒(méi)加載；此時(shí)通過(guò) detailApi(userId) 把該用戶詳情拉回來(lái)做回顯。

4.7 樣式與觸底哨兵

5. api 的寫(xiě)法（最重要）

組件會(huì)在這些時(shí)機(jī)調(diào)用 api(params)：

• 下拉打開(kāi)且無(wú)緩存（或緩存為空）時(shí)
• 輸入關(guān)鍵詞觸發(fā)遠(yuǎn)程搜索時(shí)
• 觸底（或點(diǎn)擊“加載更多”）時(shí)拉取下一頁(yè)

5.1 api(params) 直接是請(qǐng)求函數(shù)

const api = async (params: any) => {
  return request.get('/users', { params })
}

5.2 apiAsync = true：api 先返回請(qǐng)求函數(shù)（適合依賴異步初始化）

<SelectPagination v-model="value" :api="createApi" :api-async="true" />

const createApi = async () => {
  const token = await getTokenSomehow()
  return (params: any) => request.get('/users', { params, headers: { token } })
}

6. 事件（Events）

7. 插槽（Slots）

7.1 footer：完全自定義“加載中/沒(méi)有更多/加載更多”

slot props：

• loading: boolean 當(dāng)前是否在請(qǐng)求
• hasMore: boolean 是否還有下一頁(yè)
• options: any[] 當(dāng)前已加載的 options
• loadMore: () => void 主動(dòng)觸發(fā)加載更多

示例：

<SelectPagination v-model="value" :api="fetchUsers" footer-sentinel-id="user-select-footer">
  <template #footer="{ loading, hasMore, loadMore }">
    <div v-if="loading" style="padding: 8px 0; text-align: center">加載中...</div>
    <div v-else-if="!hasMore" style="padding: 8px 0; text-align: center">沒(méi)有更多了</div>
    <div v-else style="padding: 8px 0; text-align: center; cursor: pointer" @click="loadMore">
      點(diǎn)擊加載更多
    </div>
  </template>
</SelectPagination>

8. 暴露方法（ref）

通過(guò)組件 ref 訪問(wèn)：

• loadData(isReset?: boolean)：加載數(shù)據(jù)，傳 true 表示重置并從第一頁(yè)開(kāi)始
• clearCache()：清除緩存
• restoreCache()：手動(dòng)恢復(fù)緩存（返回是否成功）
• updateValue(val)：手動(dòng)更新值（會(huì)觸發(fā) v-model/change）
• loadEchoData()：手動(dòng)觸發(fā)回顯數(shù)據(jù)拉取
• setPage(page: number)：設(shè)置頁(yè)碼（一般調(diào)試用）
• setOptions(options: any[])：直接覆蓋 options（一般調(diào)試用）
• options：當(dāng)前 options 的 ref
• currentPage：當(dāng)前頁(yè)碼的 ref

總結(jié)

到此這篇關(guān)于ElSelect二次封裝組件實(shí)現(xiàn)分頁(yè)(下拉加載、緩存)、回顯功能的文章就介紹到這了,更多相關(guān)ElSelect二次封裝組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論