当前位置：首页 > news >正文

支持远程搜索、分页加载和多选功能的 el-select 组件

news 来源：原创 2025/4/22 11:07:47

功能点：远程搜索获取下拉数据

  <dealerMoreSelect  slot="1" v-model="erp" placeholder="ERP/经销商编码"></dealerMoreSelect>组件<template><!-- multiple  需要改下面的 props value 为数组--><el-selectclass="lomoreSelect"v-bind="$attrs"v-loadmore="activityLoadMore"v-model="activityList"size="small"collapse-tagsfilterableremoteclearable:remote-method="remoteMethod":loading="remoteLoading"@clear="clearMethod"><el-optionv-for="item in options":key="item.dealerNo + Math.random()":label="item.dealerShortName":value="item.dealerNo"></el-option></el-select>
</template><script>
// import { getActivityManagementInfos } from '@/views/clue/api/clueConfig'
import { getDealerPage } from '@/views/store/api/index.js'
export default {name: 'dealermoreSelect',props: {value: {type: String,default: () => ''}},data() {return {disabledLoad: false,remoteLoading: false,visibleDialog: false,submitLoading: false,loading: false,name: undefined,pageNum: 1,pageSize: 10,options: []}},computed: {activityList: {get() {return this.value},set(val) {this.$emit('input', val)}}},mounted() {this.init()},methods: {init() {this.visibleDialog = truethis.getList()},// focus() {//   this.name = ''//   this.clearMethod()// },remoteMethod(query) {console.log(query)this.pageNum = 1this.options = []this.remoteLoading = truethis.name = querythis.getList()},clearMethod() {this.pageNum = 1this.name = ''this.options = []this.remoteLoading = truethis.getList()},// 获取活动列表async getList() {const res = await getDealerPage({pageNum: this.pageNum,pageSize: this.pageSize,keyword: this.name,businessStatus: '' // 状态 0-开启 1-关闭})if (res.code === '0') {this.remoteLoading = falseif (res.data?.list?.length < this.pageSize) {this.disabledLoad = true} else {this.disabledLoad = false}this.options = this.options.concat(res.data.list || [])}},activityLoadMore() {if (this.disabledLoad) returnthis.pageNum += 1this.disabledLoad = truethis.getList()},submit() {}}
}
</script><style lang="scss" scoped>
.lomoreSelect{width: 215px !important;/deep/ .el-select__caret:first-child::before {content: "\e6e1";}/deep/ .is-focus {.el-select__caret:first-child {transform: rotateZ(0deg);}}
}
</style>

v-loadmore  指令
export default {loadmore: {bind(el, binding) {const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')SELECTWRAP_DOM.addEventListener('scroll', function() {const condition =this.scrollHeight - this.scrollTop <= this.clientHeight + 5if (condition) { binding.value() }})}}
}