Element Select选择器从服务器搜索数据，输入关键字进行查找（从服务器获得的数据有分页）

先说一说需求：后台管理系统的一个下拉筛选框，下拉的数据要从后台获取，每次输入关键字从后台获取下拉条目，获取的下拉条目是带有分页的。

需求分析：那么有两点需要处理，第一，在输入框数据发生变化时首先向后台请求数据并且渲染在下拉框里面，注意这时请求的数据是带有分页的，所以要在下拉框进行滑动的时候页码加一继续请求数据，也就是要进行loadmore逻辑的处理；第二，监听下拉框选择的数据，当选择的数据变化的时候，带着这个选择的数据（作为筛选条件）去进行主列表的请求。

下面附上代码：

      <div class="datePicker" style="display:inline-block;margin-right:10px;">标签：<el-select v-model="tagArr" v-el-select-loadmore="loadmore" filterable multiple collapse-tags placeholder="请选择" style="width:250px;" :filter-method="tagSearch" clearable><el-optionv-for="(item, i) in tagOption":key="i":label="item":value="item"/></el-select></div>

<script>
export default {// 这里自定义下拉加载的指令directives: {'el-select-loadmore': {bind(el, binding) {// 获取element-ui定义好的scroll盒子const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')SELECTWRAP_DOM.addEventListener('scroll', function() {/*** scrollHeight 获取元素内容高度(只读)* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.* clientHeight 读取元素的可见高度(只读)* 如果元素滚动到底, 下面等式返回true, 没有则返回false:* ele.scrollHeight - ele.scrollTop === ele.clientHeight;*/const condition = this.scrollHeight - this.scrollTop <= this.clientHeightif (condition) {binding.value()}})}}},data() {return {info: {},isLoad: true,tagOption: [],filter: {pageNo: 1,pageSize: 10,tags: [],},tagFilter: {pageNo: 1,pageSize: 50,keyword: ''}}},watch: {tagArr(newVal, oldVal) {this.filter.tags = newVal// console.log(this.filter.tags, '这里是选择的标签')this.getListTo1()}},methods: {getListTo1() {// 进行搜索的时候页码要跳到1this.filter.pageNo = 1this.getList()},loadmore() {// 当还有标签的时候再继续请求if (this.isLoad) {this.tagFilter.pageNo++this.getTagsList()}},tagSearch(val) {// console.log(val, '搜索标签了')this.tagFilter.keyword = valthis.tagFilter.pageNo = 1this.tagOption = []this.getTagsList()},getTagsList() {wallPapersTags(this.tagFilter).then(res => {// console.log(res, '这里是所有的标签列表')for (const item of res.list) {this.tagOption.push(item)}// this.tagOption = res.listthis.isLoad = res.more})},getList() {wallPapersList(this.filter).then(res => {this.info = resthis.listLoading = false})}}}</script>

到此，这样一个很小的功能就结束了。
功能虽小，但是要注意的细节还是很多的，所以我选择记录下来一方面为了自己加深印象，另一方面希望能够给到过路的人一点点帮助，哈哈哈！
加油，感谢那个正在努力的自己！！！

Element Select选择器从服务器搜索数据，输入关键字进行查找（从服务器获得的数据有分页）相关推荐

解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找
解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找参考文章: (1)解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找 (2)https://ww ...
vue中关键字的搜索，输入关键字列表和分页一起刷新
接着上篇文章,这个是关键字的搜索,输入关键字进行搜索的时候,列表的数据和分页跟着一起改变 <template><div class="all"><di ...
selenium定位百度搜索框输入关键字后，下拉框联想出来的怎么定位
百度搜索框输入关键字后,下拉框联想出来的怎么定位? 百度下拉框联想出来的我们按F12中的箭头时,下拉框会消失收回去的. 这个时候怎么办呢解决办法: 就三个步骤 1.在百度搜索框输入关键字" ...
大学c语言作业用什么搜题比较好,快速查找题库_什么手机软件可以把题库输入进去然后输入关键字可以查找点道题_淘题吧...
❶ 什么手机软件可以把题库输入进去.然后输入关键字可以查找点道题用试题通啊,这款软件可以的,题库录入过后搜索关键字就能看到答案和题目了. ❷ 如何快速寻找题库中的答案我有份题库,答题时如何快速的找到 ...
办公自动化：输入关键字，查找Excel里的内容_xing2516_新浪博客
##输入关键字,查找Excel里的内容import xlrd file_path='成绩.xlsx'#读取工作簿workbook=xlrd.open_workbook(file_path) grade ...
小程序篇1-1：搜索框输入关键字、词检索；点击取消恢复默认状态
当光标点击搜索框输入(后台数据)关键字时,点击输入框后面的×恢复初始状态. 代码如下 wxml: <view class='search'>< ...
BrandExample.Criteria方法实现搜索框输入关键字模糊查询
1.前端: 搜索框: <div class="has-feedback">关键字查询:<input ng-model="searchEntity.nam ...
vue+element实现Select 选择器的远程搜索、滚动加载
1.html结构: <el-selectv-model.trim="query.enEnterpriseBaseId"v-loadmore="loadMore&qu ...
搜索框输入内容进行查找匹配

Element Select选择器从服务器搜索数据，输入关键字进行查找（从服务器获得的数据有分页）

Element Select选择器从服务器搜索数据，输入关键字进行查找（从服务器获得的数据有分页）相关推荐

最新文章

热门文章