template结构
绑定v-loadmore
<el-form-item
v-if="ruleForms.allocationMode == 1"
label="合作接收方:"
prop="receiveUserId"
class="contents-is-require cooperationType cooperationAcceptor"
>
<el-select
v-model="ruleForms.receiveUserName"
v-loadmore
class="contents-beiyong-select"
filterable
value-key="mchUserId"
remote
reserve-keyword
placeholder="请输入合作接收方号码/工号/姓名进行搜索"
:remote-method="remoteMethod"
:loading="selectLoading"
popper-class="select-remote"
clearable
data-tid="receiveUserId"
@change="selectChangeHandle"
@blur="handleBlue"
>
<el-option
v-for="(item, index) in peopleList"
:key="item.mchUserId"
:label="item.userName + '(' + item.userCenterNo + ')'"
:value="item"
:data-tid="'value' + index"
></el-option>
</el-select>
export default {
components: {
NewRequire,
},
directives: {
// 自定义指令 设置滚动到底部加载下一页的数据
loadmore: {
inserted(el, binding, vnode) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
SELECTWRAP_DOM.addEventListener('scroll', function () {
if (vnode.context.optionFlag) {
// 滚到底部
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (CONDITION) {
vnode.context.optionPage += 1;
vnode.context.getPeopleList(
vnode.context.optionKey,
'peopleList',
vnode.context.optionPage,
);
}
}
});
},
},
},
data() {
return {
ruleForms: {
receiveUserId: undefined, //合作接收方ID
receiveUserName: undefined, //合作接收方姓名
},
defaultPeopleList: [], //搜索人员默认列表
peopleList: [], //合作接收人请求列表
selectLoading: false,
openedFlag: false,
optionPage: 1, //下拉框页数
optionKey: '', //下拉框关键字
optionFlag: false, //滚动加载
};
},
methods: {
/**
* @description 弹窗打开时的事件
*/
openModal(info, flag) {
this.dialogVisible = true;
this.ruleForms.customerName = info.customerName;
this.ruleForms.bizId = info?.id;
this.getPeopleList();
// {
// 默认加载
// start: 1,
// limit: 50,
// },
// 'default',
if (!flag) return;
this.openedFlag = flag;
}, /**
* @description 合作接收方搜索选中方法
*/
selectChangeHandle(val) {
//if (val === '') { //注释以后为输入值后就清空数组
// this.peopleList = this.defaultPeopleList;
// this.peopleList = [];//清空合作接收方数组
//}
this.ruleForms.mchUserId = val.mchUserId;
/*此处receiveUserId需要修改*/
this.ruleForms.receiveUserName = val.userName;
this.ruleForms.receiveUserId = val.mchUserId;
},
/**
* @description 远程搜索合作接收方
*/
remoteMethod(keyword) {
if (!keyword.trim()) return;
this.selectLoading = true;
this.getPeopleList(keyword.trim());
},
//获取合作接收方人员list
getPeopleList(keyword, type, start = 1) {
start >= 1 ? (this.selectLoading = false) : (this.selectLoading = true);
let params = {
start: 1,
limit: 10,
};
const regPhone = /^1[3-9]\d{9}$/;
if (regPhone.test(keyword)) {
params.phone = keyword; //输入的是手机号
} else {
params.searchKey = keyword; //输入的是姓名
}
get_receiver(params)
.then((res) => {
if (res.code === 200) {
res = res.data;
// this.peopleList = res.records || [];
// if (type) {
// this.defaultPeopleList = res.records;
// }
// this.selectLoading = false;
if (this.optionFlag && this.optionPage > 1) {
// 滚动加载 且不是第一页
if (res.records) {
this.peopleList = [...this.peopleList, ...res.records];
}
} else {
this.peopleList = res.records || [];
}
res.records.length < params.limit
? (this.optionFlag = false)
: (this.optionFlag = true);
} else {
this.$message.warning(res.message);
}
})
.catch(() => (this.selectLoading = false));
},
handleBlue() {
if (this.peopleList.length === 0) {
// this.peopleList = this.defaultPeopleList;
this.peopleList = [];
}
},
}
