ant的a-select远程搜索加分页
2023-12-17 22:19:09
a-select扩展菜单使用?dropdownRender?插槽并且增加搜索调后端接口,整理一下
1.template中
<a-select
show-search
:default-active-first-option="false"
:showArrow="false"
@change="getName"
:filter-option="false"
@search="search"
placeholder="请输入姓名"
v-decorator="['name', validatorRules.name]"
>
<a-select-option
v-for="item in customerList"
:key="item.customerId"
:value="item.customerId"
>{{ item.customerName }}</a-select-option
>
//a-select扩展菜单使用 dropdownRender 插槽
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 4px 0" />
<div
style="display: flex; justify-content: space-between; align-items: center"
>
<div
style="padding: 4px 8px; cursor: pointer"
@mousedown="(e) => e.preventDefault()"
@click="getCustomerList('pre')"
v-show="nowPage"
>
上一页
</div>
<div>当前第{{ nowPage }}页</div>
<div
style="padding: 4px 8px; cursor: pointer"
@mousedown="(e) => e.preventDefault()"
@click="getCustomerList('next')"
v-show="nowPage + 1 !== maxPage"
>
下一页
</div>
</div>
</div>
</a-select>
2.data
//只展示必要字段
components: {
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes,
},
},
data() {
//防抖
this.search = debounce(this.search, 800);
return {
nowPage: 1,
maxPage: 1,
3.methods
//通过查询出来的名字,接口返回其他内容 来赋值给下面其他字段
getName(id) {
this.$nextTick(() => {
let obj = {};
this.customerList.map((item) => {
if (item.customerId == id) {
obj = { ...item, age: item.customerAge };
this.name = item.customerName;
}
});
this.form.setFieldsValue(obj);
});
},
search(val) {
this.searchContent = val;
this.nowPage = 1;
this.getCustomerList();
},
getCustomerList(type) {
if (type == "pre" && this.nowPage > 1) {
this.nowPage -= 1;
} else if (type == "next") {
this.nowPage += 1;
}
//搜索条件为空则不查询,因为后端数据太大
if (!this.searchContent) {
this.customerList = [];
return;
}
getAllCustomerList({
pageNo: this.nowPage,
pageSize: 10,
phone: this.searchContent,
}).then((res) => {
if (res.code == 200) {
this.customerList = res.result.records;
this.maxPage = res.result.pages;
}
});
},
4.防抖
export function debounce(fn, delay) {
let timer = null; // 形成闭包
return function () {
if (timer) {
clearTimeout(timer); // 防抖
}
timer = setTimeout(() => {
fn(); // 执行传入的函数
}, delay);
};
}
5.效果
文章来源:https://blog.csdn.net/anwenagululu/article/details/132755060
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!