效果图===>
代码===>
<el-form ref="form" :inline="true" :model="form" size="mini">
<el-form-item label="客户标签" >
<el-select
v-model="form.OUserId"
v-el-select-loadmore="loadmore"
placeholder="请选择客户标签"
filterable
remote
:remote-method="remoteMethod"
clearable
style="width: 100%"
@change="handleChange"
>
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.name"
:value="item.userId"
/>
</el-select>
</el-form-item>
</el-form>
export default {
// 自定义指令
directives: {
'el-select-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
if (condition) {
binding.value()
}
})
}
}
},
data() {
return {
form: {
pageNo: 1,
pageSize: 10,
ouserId: '',
},
// 列表数据
options: [],
formData: {
pageNo: 1,
pageSize: 10
},
}
},
methods: {
// 远程搜索
remoteMethod(query) {
this.formData.pageNo = 1
config
.getUSerPg(Object.assign({}, this.formData, { name: query }))
.then(res => {
if (res.data.success) {
this.options = res.data.data.list
}
})
},
// 选中值发生变化时触发
handleChange(val) {
console.log('val', val)
this.form.OUserId = val
},
loadmore() {
this.formData.pageNo++
this.handleUserList(this.formData)
},
// 查接口 发请求
handleUserList(formData) {
config.getUSerPg(formData).then(res => {
if (res.data.success) {
const _res = res.data.data.list
this.options = [...this.options, ..._res]
console.log('this.options ', this.options)
}
})
},
}