基于ElementPlus封装下拉分页单选、多选组件

单选

多选

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">暂无数据</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: { // 远程地址
        required: true,
        type: String,
        default: ''
    },
    /*
     当需要编辑回填时，整体页面需要加个loading，让该组件不能点击。
     或判断是编辑页面，将该组件置为disabled，等有editName后，再把disabled置为false
    */
    editData: { // 编辑回填选中的列表，编辑时必须
        type: Array,
        default() {
            return []
        }
    },
    disabled: { // 是否禁用
        type: Boolean,
        default: false,
    },
    value: { // value配置项
        type: String,
        default: 'id'
    },
    label: { // label配置项
        type: String,
        default: 'name'
    },
    /*
     当额外传参是动态变化的，需要用响应式的方式传进来
    */
    otherParams: { // 接口传参
        type: Object,
        default() {
            return {}
        }
    },
    handleResult: { // 处理接口返回的数据，使其返回data和page的组合形式
        type: Function,
        default: (data) => {
            return data
        }
    },
    multiple: {
        type: Boolean, // 是否多选
        default: false,
    },
    pageSize: { // 每次传参个数
        type: Number,
        default: 20,
    },
    keyName: { // 搜索条件的key名
        type: String,
        default: 'keywords'
    },
    pageNumName: { // 搜索条件的当前页名
        type: String,
        default: 'pageNum'
    },
    pageSizeName: { // 搜索条件的每页个数名
        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'])

// 动态配置项
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的区别是：reset执行后，再次打开select框，数据会重新请求
    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;
    font-weight: 400;
    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;
}

.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;
}

/* 多选时显示原有的标签样式 */
.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

// 指令相关
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)
        }
    }

    return { onlyId, vLoadMoreDirective, vSearchDirective }
}

// 页面数据
export const useListEffect = (props, emits, formItem) => {
    const list = ref([]) // 列表数据
    const keywords = ref('') // 搜索关键字
    let originListInfo = {} // 源数据详情
    const 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)
    }

    // 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 // 选中的数据信息

        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') // 触发表单校验
    }

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

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

        // 请求数据
        getList()
    }

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

    /**
     * 清空已选项
     * @param {*} triggerChange 是否触发change事件
     */
    const clear = (triggerChange) => {
        const val = props.multiple ? [] : undefined

        selectVal.value = val

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

    /**
     * 清空已选项请重新请求列表数据(与clear的区别是：reset执行后，再次打开select框，数据会重新请求)
     * @param {*} triggerChange 是否触发change事件
     */
    const reset = (triggerChange) => {
        searchSet.init = true
        clear(triggerChange)
    }

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

    // 监听传参改变，需要把已选值置空，当再次展开时，重新请求接口
    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 // 回填选项

        // 回填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 // 保存源数据
        })

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

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

        emits('update:modelValue', selectId) // 触发id改变
        emits('update:text', selectText) // 触发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 }
}

基础用法：

引入组件，设置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
                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' }
    ],
})

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

// 接口返回结果特殊处理
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() // 有联动关系时，需要等前一个的更新后，再更新当前值
    formData.editAdunitData = [{ // 广告位回填
        id: 63843,
        name: 'vv-联合控量-test'
    }]

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

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

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

参数说明：

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