單選

多選

vue和elementPlus版本：

"vue": "^3.2.37",
"element-plus": "2.3.6",

組件源碼：

components/SelectMore/index.vue

<template>
    <el-select v-model="selectVal" class="more-wrap" :multiple="multiple" :collapse-tags="multiple"
        :collapse-tags-tooltip="multiple" :placeholder="placeholder" :popper-class="onlyId" :disabled="disabled"
        v-load-more-directive="getList" v-search-directive @visible-change="visibleChange" clearable
        @change="selectChange">
        <el-option v-for="item in list" :key="item[value]" :label="optionText(item[value], item[label])"
            :value="item[value]">
            <!-- option文字 -->
            <p class="option-wrap" v-if="multiple" :title="optionText(item[value], item[label])">
                <label class="el-checkbox">
                    <span class="el-checkbox__inner"></span>
                    <span class="option-text" v-text="optionText(item[value], item[label])"></span>
                </label>
            </p>
            <p v-else class="option-wrap option-text" v-text="optionText(item[value], item[label])"
                :title="optionText(item[value], item[label])"></p>
        </el-option>

        <el-option v-show="showLoading" value="" disabled>
            <el-icon class="is-loading loading-icon">
                <i-ep-loading />
            </el-icon>正在加載中...
        </el-option>
        <p class="no-data" v-show="!showLoading && !list.length">暫無數(shù)據(jù)</p>
    </el-select>

    <!-- select里input搜索框 -->
    <el-form @submit.prevent @click.stop :class="`more-filter-${onlyId}`" class="more-filter">
        <el-form-item>
            <el-input v-model.trim="keywords" size="default" clearable :placeholder="searchPlaceholder">
            </el-input>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { useFormItem } from 'element-plus'
import { useTextEffect, useDirectivesEffect, useListEffect } from './index'

const props = defineProps({
    modelValue: { // v-model

    },
    text: { // v-model:text

    },
    url: { // 遠(yuǎn)程地址
        required: true,
        type: String,
        default: ''
    },
    /*
     當(dāng)需要編輯回填時，整體頁面需要加個loading龙屉，讓該組件不能點(diǎn)擊呐粘。
     或判斷是編輯頁面，將該組件置為disabled转捕，等有editName后，再把disabled置為false
    */
    editData: { // 編輯回填選中的列表唆垃，編輯時必須
        type: Array,
        default() {
            return []
        }
    },
    disabled: { // 是否禁用
        type: Boolean,
        default: false,
    },
    value: { // value配置項(xiàng)
        type: String,
        default: 'id'
    },
    label: { // label配置項(xiàng)
        type: String,
        default: 'name'
    },
    /*
     當(dāng)額外傳參是動態(tài)變化的五芝，需要用響應(yīng)式的方式傳進(jìn)來
    */
    otherParams: { // 接口傳參
        type: Object,
        default() {
            return {}
        }
    },
    handleResult: { // 處理接口返回的數(shù)據(jù)，使其返回data和page的組合形式
        type: Function,
        default: (data) => {
            return data
        }
    },
    multiple: {
        type: Boolean, // 是否多選
        default: false,
    },
    pageSize: { // 每次傳參個數(shù)
        type: Number,
        default: 20,
    },
    keyName: { // 搜索條件的key名
        type: String,
        default: 'keywords'
    },
    pageNumName: { // 搜索條件的當(dāng)前頁名
        type: String,
        default: 'pageNum'
    },
    pageSizeName: { // 搜索條件的每頁個數(shù)名
        type: String,
        default: 'pageSize'
    },
    showId: { // 是否顯示id
        type: Boolean,
        default: true,
    },
    placeholder: { // select框文字
        type: String,
        default: '請選擇'
    },
    searchPldText: { // 搜索顯示文字
        type: String,
        default: ''
    },
})

const emits = defineEmits(['change', 'update:modelValue', 'update:text'])

// 動態(tài)配置項(xiàng)
const { optionText, searchPlaceholder } = useTextEffect(props)

// 指令
const { onlyId, vLoadMoreDirective, vSearchDirective } = useDirectivesEffect()

// 搜索和列表
const { formItem } = useFormItem()
const { selectVal, keywords, showLoading, list, getList, visibleChange, selectChange, clear, reset } = useListEffect(props, emits, formItem)

defineExpose({
    reset, // reset與clear的區(qū)別是：reset執(zhí)行后辕万，再次打開select框枢步，數(shù)據(jù)會重新請求
    clear // 清空已選項(xiàng)
})
</script>

<style lang="scss" scoped>
@import '@/style/mixins.scss';

.more-filter {
    padding: 10px 10px 0;
    min-width: 230px;

    .el-form-item {
        margin-bottom: 0
    }
}

.option-wrap {
    margin: 0 -10px 0 -7px;
}

.option-text {
    @include ellipsis;
    max-width: 300px;
    font-weight: 400;
    margin-left: 5px;
}

.loading-icon {
    margin-right: 5px;
    vertical-align: middle;
}

/* 多選時顯示原有的標(biāo)簽樣式 */
.more-wrap :deep(.el-select-tags-wrapper.has-prefix) {
    display: flex;
    flex-wrap: nowrap;
}

.tool-tip-text {
    max-width: 400px;
}

/* 多選options樣式  */
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    &:after {
        display: none;
    }

    .el-checkbox .el-checkbox__inner {
        background-color: var(--el-checkbox-checked-bg-color);
        border-color: var(--el-checkbox-checked-input-border-color);

        &:after {
            transform: rotate(45deg) scaleY(1);
        }
    }

}

.no-data {
    text-align: center;
    font-size: 14px;
    color: #999;
}

:deep(.el-input__inner) {
    text-overflow: ellipsis;
}
</style>
<style>
/* 多選樣式選中文字彈出樣式 */
.el-select__collapse-tags {
    max-width: 500px;
    max-height: 200px;
    overflow: auto;
    padding-right: 10px;
}
</style>
</script>

<style lang="scss" scoped>
@import '@/style/mixins.scss';

.more-filter {
    padding: 10px 10px 0;
    min-width: 230px;

    .el-form-item {
        margin-bottom: 0
    }
}

.option-wrap {
    margin: 0 -10px 0 -7px;
}

.option-text {
    @include ellipsis;
    max-width: 300px;
    margin-left: 5px;
}

.loading-icon {
    margin-right: 5px;
    vertical-align: middle;
}

/* 多選時顯示原有的標(biāo)簽樣式 */
.more-wrap :deep(.el-select-tags-wrapper.has-prefix) {
    display: flex;
    flex-wrap: nowrap;
}

/* 多選時顯示文字樣式 */
.more-wrap-text {
    :deep(.el-select__tags) {
        display: none;
    }

    .more-sel-text {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 30px;
        z-index: var(--el-index-normal);

        .text-wrap {
            padding: 1px 11px;
        }
    }
}

.tool-tip-text {
    max-width: 400px;
}

/* 多選options樣式  */
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    &:after {
        display: none;
    }

    .el-checkbox .el-checkbox__inner {
        background-color: var(--el-checkbox-checked-bg-color);
        border-color: var(--el-checkbox-checked-input-border-color);

        &:after {
            transform: rotate(45deg) scaleY(1);
        }
    }

}

:deep(.el-input__inner) {
    text-overflow: ellipsis;
}
</style>
<style>
/* 多選樣式選中文字彈出樣式 */
.el-select__collapse-tags {
    max-width: 500px;
    max-height: 200px;
    overflow: auto;
    padding-right: 10px;
}
</style>

components/SelectMore/index.js

import { debounce } from '@/utils/tools'
import request from '@/utils/request'

let idIndex = 0

// 指令相關(guān)
export const useDirectivesEffect = () => {
    // 保證當(dāng)前組件唯一
    const onlyId = `more_${idIndex++}_${new Date().getTime()}`

    // 監(jiān)聽滾動到底部時，執(zhí)行
    const vLoadMoreDirective = {
        mounted(el, binding) {
            const selectDropDownWrap = document.querySelector(`.el-popper.${onlyId} .el-select-dropdown .el-select-dropdown__wrap`)
            selectDropDownWrap?.addEventListener('scroll', function () {
                const scrollToBottom = Math.floor(this.scrollHeight - this.scrollTop) <= this.clientHeight
                if (scrollToBottom) {
                    binding.value()
                }
            })
        }
    }

    // 下拉框內(nèi)插入搜索框
    const vSearchDirective = {
        mounted(el, binding) {
            const selectDropDown = document.querySelector(`.el-popper.${onlyId} .el-select-dropdown`)
            const searchDom = document.querySelector(`.more-filter-${onlyId}`)
            searchDom && selectDropDown?.prepend(searchDom)
        }
    }

    return { onlyId, vLoadMoreDirective, vSearchDirective }
}

// 頁面數(shù)據(jù)
export const useListEffect = (props, emits, formItem) => {
    const list = ref([]) // 列表數(shù)據(jù)
    const keywords = ref('') // 搜索關(guān)鍵字
    let originListInfo = {} // 源數(shù)據(jù)詳情
    const searchSet = reactive({
        init: true, // 是否是第一次加載
        pageNum: 1, // 當(dāng)前頁數(shù)
        loading: false, // 正在請求接口
        isFinish: false,  // 數(shù)據(jù)加載完成
    })

    // 請求接口獲取數(shù)據(jù)
    let controller // 接口api
    const getList = async () => {
        // 加載完成或正在加載時渐尿，取消加載
        if (searchSet.isFinish || searchSet.loading) {
            return false
        }

        // 中斷上次的請求醉途。防止加載分頁數(shù)據(jù)時，搜索內(nèi)容的結(jié)果是上一次的分頁內(nèi)容
        controller && controller.abort()
        controller = new AbortController()

        searchSet.loading = true
        const pageNum = searchSet.pageNum++;
        const pageSize = props.pageSize;
        const params = Object.assign({}, props.otherParams, {
            [props.pageNumName]: pageNum,
            [props.pageSizeName]: pageSize,
            [props.keyName]: keywords.value
        })

        const result = await request.post(props.url, params, {
            signal: controller.signal
        })

        if (result.code === 'ERR_CANCELED') { // 已取消不再往下執(zhí)行
            return false
        }

        searchSet.loading = false
        const { page, data = [] } = props.handleResult(result)
        searchSet.isFinish = pageNum * pageSize >= page?.total
        list.value = list.value.concat(data)
    }

    // select框的值
    const selectVal = computed({
        get: function () {
            return props.modelValue
        },
        set: function () {

        }
    })

    // change事件
    const selectChange = (selectId) => {
        const idKey = props.value
        const textKey = props.label
        let updateId = undefined // 選中的id
        let updateText = undefined // 選中的text
        let updateOriginData = undefined // 選中的數(shù)據(jù)信息

        const listValue = toRaw(list.value)
        if (props.multiple) { // 多選
            updateId = []
            updateText = []
            updateOriginData = []

            selectId?.forEach(itemId => {
                let originInfo = originListInfo[itemId]
                if (!originInfo) {
                    originInfo = listValue.find(itemObj => itemObj[idKey] === itemId)
                    originListInfo[itemId] = originInfo
                }
                updateId.push(originInfo[idKey])
                updateText.push(originInfo[textKey])
                updateOriginData.push(originInfo)
            })
        } else { // 非多選
            let originInfo = selectId ? originListInfo[selectId] : {}
            if (selectId && !originInfo) {
                originInfo = listValue.find(itemObj => itemObj[idKey] === selectId)
                originListInfo[selectId] = originInfo
            }

            updateId = originInfo[idKey]
            updateText = originInfo[textKey]
            updateOriginData = originInfo
        }

        emits('update:modelValue', updateId)
        emits('update:text', updateText)
        emits('change', updateOriginData)
        formItem?.validate('change') // 觸發(fā)表單校驗(yàn)
    }

    // 展示加載更多選項(xiàng)
    const showLoading = computed(() => {
        return !searchSet.isFinish
    })

    // 重置請求數(shù)據(jù)
    const resetList = () => {
        // 重置請求狀態(tài)
        searchSet.pageNum = 1
        searchSet.loading = false
        searchSet.isFinish = false
        list.value = []

        // 請求數(shù)據(jù)
        getList()
    }

    // 展示時請求接口
    const visibleChange = (visible) => {
        if (visible && searchSet.init) {
            searchSet.init = false
            resetList()
        }
    }

    /**
     * 清空已選項(xiàng)
     * @param {*} triggerChange 是否觸發(fā)change事件
     */
    const clear = (triggerChange) => {
        const val = props.multiple ? [] : undefined

        selectVal.value = val

        if (triggerChange) { // 觸發(fā)change事件
            selectChange()
        } else { // 更新id和text的值
            emits('update:modelValue', val)
            emits('update:text', val)
        }
    }

    /**
     * 清空已選項(xiàng)請重新請求列表數(shù)據(jù)(與clear的區(qū)別是：reset執(zhí)行后砖茸，再次打開select框隘擎，數(shù)據(jù)會重新請求)
     * @param {*} triggerChange 是否觸發(fā)change事件
     */
    const reset = (triggerChange) => {
        searchSet.init = true
        clear(triggerChange)
    }

    // 搜索
    watch(keywords, debounce(resetList, 300))

    // 監(jiān)聽傳參改變，需要把已選值置空凉夯，當(dāng)再次展開時货葬，重新請求接口
    watch(() => props.otherParams, (newVal, oldVal) => {
        if (JSON.stringify(oldVal) === JSON.stringify(newVal)) {
            return false
        }
        reset(true)
    }, { deep: true })

    // 編輯回填
    watch(() => props.editData, (editData) => {
        editData = toRaw(editData)

        if (!editData?.length) {
            return false
        }

        searchSet.init = true // 更改值時采幌，將init重置為true

        list.value = editData // 回填選項(xiàng)

        // 回填id和text，并保存源數(shù)據(jù)
        let editIdArr = []
        let updateText = []
        const idKey = props.value
        const textKey = props.label
        editData.forEach((item) => {
            editIdArr.push(item[idKey])
            updateText.push(item[textKey])
            originListInfo[item[props.value]] = item // 保存源數(shù)據(jù)
        })

        const selectId = props.multiple ? editIdArr : editIdArr[0]
        const selectText = props.multiple ? updateText : updateText[0]

        selectVal.value = selectId // 回填select框id

        emits('update:modelValue', selectId) // 觸發(fā)id改變
        emits('update:text', selectText) // 觸發(fā)text改變
    })

    return { selectVal, keywords, showLoading, list, getList, visibleChange, selectChange, clear, reset }
}

// 頁面配置文字
export const useTextEffect = (props) => {
    const optionText = (id, name) => {
        return props.showId ? `【${id}】${name}` : name
    }

    const searchPlaceholder = computed(() => props.searchPldText || (props.showId ? '模糊搜索ID或名稱' : '模糊搜索名稱'))

    return { optionText, searchPlaceholder }
}

基礎(chǔ)用法：

引入組件震桶，設(shè)置v-model和url即可休傍。

 <select-more v-model="" url=""></select-more>

完整示例見以下代碼：

<template>
    <el-form :model="formData" :rules="rules" label-width="130px">

        <h4>單選</h4>
        <el-form-item label="訂單：" prop="order">
            <select-more v-model="formData.order" v-model:text="formData.orderText"
                url="/api/put-name">
            </select-more>
        </el-form-item>

        <h4>單選-拓展</h4>
        <el-form-item label="admin：" prop="admin">
            <select-more v-model="formData.admin" url="/api/getList" label="showText"
                pageSizeName="perPageCount" :other-params="adminParams" :defaultList="formData.defaultList"
                placeholder="全部" searchPlaceholder="模糊搜索id和名稱" :handleResult="handleResult" @change="selectChange">
            </select-more>
        </el-form-item>

        <h4>編輯回填</h4>
        <el-form-item label="廣告主：" prop="adver">
            <select-more v-model="formData.adver" url="/api/put-name" @change="changeAdver"
                :edit-data="formData.editAdverData">
            </select-more>
        </el-form-item>

        <h4>聯(lián)動關(guān)系</h4>
        <el-form-item label="廣告位：" prop="adunit">
            <select-more ref="adunit" v-model="formData.adunit" url="/api/put-name"
                :other-params="adunitOtherParams" :disabled="!formData.adver" :edit-data="formData.editAdunitData">
            </select-more>
        </el-form-item>

        <h4>多選</h4>
        <el-form-item label="投放：" prop="invest">
            <select-more v-model="formData.invest" multiple
                url="/api/put-name" :edit-data="formData.editInvestData">
            </select-more>
        </el-form-item>
    </el-form>
</template>

<script setup>
import selectMore from '@/components/selectMore/index.vue'

const formData = reactive({
    order: undefined,
    orderText: '',
    admin: '',
    defaultList: [{
        id: '-1',
        text: '全部',
        showText: '全部'
    }],
    adver: '',
    invest: [],
    adunit: '',
    editAdverData: [],
    editInvestData: [],
    editAdunitData: [],
})
const rules = reactive({
    order: [
        { required: true, message: '請選擇訂單', trigger: 'change' }
    ],
    adver: [
        { required: true, message: '請選擇廣告主', trigger: 'change' }
    ],
    invest: [
        { required: true, message: '請選擇投放', trigger: 'change' }
    ],
    adunit: [
        { required: true, message: '請選擇廣告位', trigger: 'change' }
    ],
})

// 依賴其它選項(xiàng)傳參
const adminParams = { key_pair: 1 }
const adunitOtherParams = computed(() => {
    return {
        no_policy: 0,
        investId: formData.adver
    }
})

// 接口返回結(jié)果特殊處理
const handleResult = (res) => {
    const data = res.data
    return {
        data: data.data,
        page: {
            total: data.total
        }
    }
}

// 模擬接口回填信息
setTimeout(async () => {
    formData.editAdverData = [{ // 廣告主回填
        id: 63787,
        name: 'vv-iptv'
    }]

    await nextTick() // 有聯(lián)動關(guān)系時，需要等前一個的更新后蹲姐，再更新當(dāng)前值
    formData.editAdunitData = [{ // 廣告位回填
        id: 63843,
        name: 'vv-聯(lián)合控量-test'
    }]

    formData.editInvestData = [{ // 投放回填
        id: 63787,
        name: 'vv-iptv'
    }, {
        id: 63843,
        name: 'vv-聯(lián)合控量-test'
    }]

    await nextTick()
    formData.editLoading = false
}, 500)
</script>

<style scoped>
.page-title {
    margin-top: 20px;
}
</style>

參數(shù)說明：

注：原創(chuàng)磨取，如需轉(zhuǎn)載請注明出處