ant-design-vue select 可搜索下拉加载更多

1.搜索

配置 showSearch 属性，支持单选模式可搜索。

filterOption 是否根据输入项进行筛选。

当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。

filterOption(input, option) {return option.componentOptions.children[0].text.includes(input)
},

2.搜索与远程数据结合

这里需要介绍 select 组件的 search 事件。

当用户输入或者选择下拉框时，我们会用的上述事件进行远程查询数据。

handleSearch (value) {if (this.timer) clearTimeout(this.timer)this.timer = setTimeout(() => {this.clearData() // 清除数据this.fecth(this.method) // 调用接口clearTimeout(this.timer)})
}

进阶：对于远程搜索需要节流控制，请求 loading 加载状态等功能。

import debounce from 'lodash/debounce';export default {data () {this.fetch = debounce(this.fetch, 800)},methods: {fetch () {this.loading = true// 接口调用this.loading = false}}
}

3.下拉加载更多数据

ant-design-vue 提供了 popupScroll 事件，下拉列表滚动时的回调。

handlePopScroll (e)) {const { scrollHeight, scrollTop, clientHeight } = e.targetif (scrollHeight - scrollTop === clientHeight) {this.paging.currentNo++this.fetch(this.method) // 调用接口}
}

4.支持 label 和 value 可配置

对于不同的接口返回的数据字段是不一致的，为了放入封装后的 select 组件中，需要配置 label 和 value。

fetch () {const newData = data.map(item => {item.name = item[this.nameModel]item.value = item[this.valueModel]return item})this.optionsList = [].concat(JSON.parse(JSON.stringify(this.optionsList)), ...newData)
}

这里的 this.nameModel 和 this.valueModel 则为传入的 label 和 value 显示的字段。

<a-select>{optionsList.map(option => {return <a-select-option value={option.value}>{option.name}</a-select-option>})}
</a-select>

ant-design-vue select 可搜索下拉加载更多相关推荐

Vue中实现特效下拉加载更多数据
1.功能需求其实在很多的页面开发过程中,有些页面尤其是评论页面,在第一次加载的时候并不会加载很多的相关数据,而是加载一部分,当用户下拉旁边的滚动条时,尤其是滚动条移动到底部的时候,就会出现行的相关内 ...
织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...
织梦dedecms实现点击下拉加载更多主要用到ajax技术.具体步骤如下: 一.首先找到并打开/plus/list.PHP文件,在里面找到如下代码: require_once(dirname(__FI ...
html下拉自动加载更多,H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件还可以,但是 ...
ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. ...
H5 下拉加载更多(模拟微信聊天记录）
前言前段时间用H5实现一个实时聊天的功能.发现很难实现像微信聊天记录一样下拉加载更多记录.市面上大部分的 Web 项目实现的效果都是上拉加载,下拉刷新.下拉加载更多很少见,下拉在加载数据方面与上拉是 ...
下拉加载更多--判断页面距离
2019独角兽企业重金招聘Python工程师标准>>> /* *下拉加载更多使用 *底部小于50返回false--加载,否则不加载 * */ function lowEnough() ...
上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装查看官网 (1)安装:npm ...
移动端下拉加载更多DEMO(纯js实现)
首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判断滚动条滚到底呢? 当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时,说明滚 ...
html5页面下拉加载更多_使您的产品页面销售更多的5条提示
html5页面下拉加载更多 Getting visitors to your website requires a great deal of work and, for many businesse ...

ant-design-vue select 可搜索下拉加载更多

ant-design-vue select 可搜索下拉加载更多相关推荐

最新文章

热门文章