单选

多选

vue和elementPlus版本：

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

组件源码：

components/SelectMore/index.vue

<template>
    <el-select v-model="selectVal" :class="mulSelectTextCls" :multiple="multiple"
        v-show-mul-text-directive="multipleShowText" :collapse-tags="multiple && !multipleShowText"
        :collapse-tags-tooltip="multiple && !multipleShowText" :placeholder="placeholder" :popper-class="onlyId"
        :disabled="disabled" v-load-more-directive="getList" v-search-directive @visibleChange="visibleChange" clearable
        @change="selectChange" readonly>
        <el-option v-for="item in list" :key="item[value]" :label="item[label]" :value="item[value]">
            <!-- option文字 -->
            <p class="option-wrap" v-if="multiple" :title="item[label]">
                <label class="el-checkbox">
                    <span class="el-checkbox__inner"></span>
                    <span class="option-text" v-text="item[label]"></span>
                </label>
            </p>
            <p v-else class="option-wrap option-text" v-text="item[label]" :title="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>
    </el-select>

    <!-- 多选时的显示文字 -->
    <div v-if="multipleShowText" :class="`more-sel-text-${onlyId}`" class="more-sel-text">
        <el-tooltip effect="dark" placement="right-start" :offset="40" :disabled="!selectedArrText">
            <template #content>
                <p class="tool-tip-text">{{ selectedArrText }}</p>
            </template>
            <div class="text-wrap">
                <input class="el-input__inner" readonly type="text" :value="selectedArrText">
            </div>
        </el-tooltip>
    </div>

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

<script setup>
import { useDirectivesEffect, useListEffect } from './index'

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

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

    },
    url: { // 远程地址
        required: true,
        type: String,
        default: ''
    },
    pageNumName: { // 搜索条件的当前页名
        type: String,
        default: 'pageNum'
    },
    pageSizeName: { // 搜索条件的每页个数名
        type: String,
        default: 'pageSize'
    },
    pageSize: { // 每次传参个数
        type: Number,
        default: 20,
    },
    keyName: { // 搜索条件的key名
        type: String,
        default: 'keywords'
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    searchPlaceholder: { // 搜索显示文字
        type: String,
        default: '模糊搜索名称'
    },
    value: { // value配置项
        type: String,
        default: 'id'
    },
    label: { // label配置项
        type: String,
        default: 'name'
    },
    otherParams: { // 接口传参。当额外传参是动态变化的，需要用响应式的方式传进来
        type: Object,
        default() {
            return {}
        }
    },
    handleResult: { // 处理接口返回的数据，使其返回data和page的组合形式
        type: Function,
        default: (res) => {
            return res
        }
    },
    defaultList: { // 默认选项
        type: Array,
        default: () => {
            return []
        }
    },
    disabled: { // 是否禁用
        type: Boolean,
        default: false,
    },
    multiple: {
        type: Boolean, // 是否多选
        default: false,
    },
    multipleShowText: { // 是否把多选结果显示成文字
        type: Boolean,
        default: false,
    },
    editData: { // 编辑回填选中的列表，编辑时必须
        type: Array,
        default() {
            return []
        }
    },
})


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

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

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

// 多选样式
const mulSelectTextCls = computed(() => {
    return {
        'more-wrap': props.multiple,
        'more-wrap-text': props.multipleShowText,
        [`more-wrap-text-${onlyId}`]: props.multipleShowText
    }
})

// 暴露组件方法
defineExpose({
    clear
})
</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;
}

/* // 多选时显示原有的标签样式 */
.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;
    max-height: 300px;
    overflow-y: auto;
}

/* // 多选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);
        }
    }

}
</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

// 指令相关
export const useDirectivesEffect = () => {
    // 保证当前组件唯一
    const onlyId = `more_${idIndex++}_${new Date().getTime()}`

    // 监听滚动到底部时，执行
    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()
                }
            })
        }
    }

    // 下拉框内插入搜索框
    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)
        }
    }

    // 显示多选选中的值
    const vShowMulTextDirective = {
        mounted(el, binding) {
            if (binding.value) {
                const mulSelectDom = document.querySelector(`.more-wrap-text-${onlyId} .select-trigger`)
                const textDom = document.querySelector(`.more-sel-text-${onlyId}`)
                textDom && mulSelectDom?.prepend(textDom)
            }
        }
    }

    return { onlyId, vLoadMoreDirective, vSearchDirective, vShowMulTextDirective }
}

// 页面数据
export const useListEffect = (props, emits) => {
    let list = ref([]) // 列表数据
    let selectVal = ref(props.multiple ? [] : undefined) // select框的值
    let selectedArrText = ref([]) // 多选时选中的文字
    let originListInfo = {} // 源数据详情
    let keywords = ref('') // 搜索关键字
    let searchSet = reactive({
        init: true, // 是否是第一次加载
        pageNum: 1, // 当前页数
        loading: false, // 正在请求接口
        isFinish: false,  // 数据加载完成
    })

    // 请求接口获取数据
    let controller // 接口api
    const getList = async () => {
        // 加载完成或正在加载时，取消加载
        if (searchSet.isFinish || searchSet.loading) {
            return false
        }

        // 中断上次的请求。防止加载分页数据时，搜索内容的结果是上一次的分页内容
        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') { // 已取消不再往下执行
            return false
        }

        searchSet.loading = false
        const { page, data = [] } = props.handleResult(result)
        searchSet.isFinish = pageNum * pageSize >= page?.total
        list.value = list.value.concat(data)
    }
    // change事件
    const selectChange = (selectId) => {
        const idKey = props.value
        const textKey = props.label
        let updateId = undefined // 选中的id
        let updateText = undefined // 选中的text
        let updateOriginData = undefined // 选中的数据信息

        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)
            })
            selectedArrText.value = updateText.join(',')
        } 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)
    }

    // 重置请求数据
    const resetList = () => {
        // 重置请求状态
        searchSet.pageNum = 1
        searchSet.loading = false
        searchSet.isFinish = false
        list.value = props.defaultList

        // 请求数据
        getList()
    }

    // 展示时请求接口
    const visibleChange = (visible) => {
        emits('visibleChange', visible)
        if (visible && searchSet.init) {
            searchSet.init = false
            resetList()
        }
    }

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

    // 编辑回填
    watch(() => props.editData, (editData) => {
        editData = toRaw(editData)

        searchSet.init = true // 更改值时，将init重置为true

        list.value = props.defaultList.concat(editData) // 回填选项

        // 回填id和text，并保存源数据
        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 // 保存源数据
        })

        selectVal.value = props.multiple ? editIdArr : editIdArr[0] // 回填id
        selectedArrText.value = updateText.join(',') // 回填text
    })

    // 清空已选项
    const clear = () => {
        searchSet.init = true
        selectVal.value = props.multiple ? [] : undefined
        selectChange()
    }

    // 展示加载更多选项
    const showLoading = computed(() => {
        return !searchSet.isFinish
    })

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

基础用法：

引入组件，设置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>联动关系</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 multiple-show-text
                url="/api/put-name" :edit-data="formData.editInvestData">
            </select-more>
        </el-form-item>

        <h4>多选2</h4>
        <el-form-item label="投放2：" prop="invest2">
            <select-more v-model="formData.invest2" multiple url="/api/put-name">
            </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: [],
    invest2: [],
    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' }
    ],
    invest2: [
        { required: true, message: '请选择投放2', trigger: 'change' }
    ],
    adunit: [
        { required: true, message: '请选择广告位', trigger: 'change' }
    ],
})

// 依赖其它选项传参
const adminParams = { key_pair: 1 }
const adunitOtherParams = computed(() => {
    return {
        no_policy: 0,
        investId: formData.adver
    }
})

// 接口返回结果特殊处理
const handleResult = (res) => {
    const { data, total } = res.data
    data.forEach(item => {
        const { id, text } = item
        item.showText = `【${id}】${text}`
    })

    return {
        data,
        page: {
            total
        }
    }
}

// change事件
const selectChange = (options) => {
    console.log(options)
}

// 改变广告主时，需要清空广告位
const adunit = ref()
const changeAdver = () => {
    adunit.value?.clear()
}

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

    formData.adunit = 63843
    formData.editAdunitData = [{ // 广告位回填
        id: 63843,
        name: 'vv-联合控量-test'
    }]

    formData.invest = [63787, 63843]
    formData.editInvestData = [{ // 投放回填
        id: 63787,
        name: 'vv-iptv'
    }, {
        id: 63843,
        name: 'vv-联合控量-test'
    }]
}, 500)
</script>

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

参数说明：

注：原创，如需转载请注明出处