vue+element实现Select 选择器的远程搜索、滚动加载

1、html结构：

<el-selectv-model.trim="query.enEnterpriseBaseId"v-loadmore="loadMore"clearablefilterableplaceholder="企业名称"@visible-change="getEnterpriseName"style="margin-right:8px;width:230px"remote:remote-method="remoteMethod"><el-optionv-for="item in enterpriseOptions":label="item.name":key="item.id":value="item.id"><span :title="item.name">{{ item.name }}</span></el-option>
</el-select>

2、script标签内data的定义：

data () {return {query: {      enEnterpriseBaseId: "",             // 企业名称page: 1,pageSize: 20,},enterpriseOptions:[],                   // 企业名称下拉选项pageSearch: 1,                          // 企业名称远程搜索页数serachValue: "",                        // 企业名称远程搜索输入内容};
},

3、method内定义方法：

//获取企业名称
getEnterpriseName () {var query = {page: 1,pageSize: 20,}this.axios.post(enterpriseNameUrl, query).then((res) => {if (res && res.data.data) {this.enterpriseOptions = res.data.data.list;}});
},// 下拉加载企业列表
loadMore () {this.pageSearch++;var query = {page: this.pageSearch,pageSize: 20,name: this.serachValue,};this.axios.post(enterpriseNameUrl, query).then((res) => {if (res && res.data.data) {res.data.data.list.map((item) => {this.enterpriseOptions.push(item);});}});
},// 远程搜索企业列表
remoteMethod (inputValue) {this.pageSearch = 1;this.serachValue = inputValue;var query = {page: 1,pageSize: 20,name: inputValue,};this.axios.post(enterpriseNameUrl, query).then((res) => {if (res && res.data.data) {this.enterpriseOptions = res.data.data.list;}});
},

4、增加自定义指令，在入口文件处引用

import Vue from 'vue'
/*** 自定义指令*/
let MyPlugin = {}
export default MyPlugin.install= function(vue, options) {Vue.directive('loadmore', {bind (el, binding) {// 获取element-ui定义好的scroll盒子const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')SELECTWRAP_DOM.addEventListener('scroll', function () {const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeightif (CONDITION) {binding.value()}})}})
}

vue+element实现Select 选择器的远程搜索、滚动加载相关推荐

vue+element表格＜el-select＞远程搜索
为了启用远程搜索,需要将filterable和remote设置为true,同时传入一个remote-method.remote-method为一个Function,它会在输入值发生变化时调用,参数为当 ...
前端学习（3081）：vue+element今日头条管理-创建页面组件并加载
element-UI select下拉框加搜索拼音搜索滚动加载新的数据
DOM 写法 <el-form-itemlabel="样品名称"prop="sampleName"label-width="150"& ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
springboot基于Elasticsearch6.x版本进行ES同义词、停用词（停止词）插件配置，远程词典热加载及数据库词典热加载总结，es停用词热更新，es同义词热更新
前言:ES版本差异较大,建议跨版本的同学,可以先了解一下版本区别,建议不要跨版本使用插件或者进行项目调试. 本总结主要基于6.x版本的6.5.1(6.2.2实测可用),分词器为IK,下载地址:http ...
Vue实现ECharts柱状图数据轮播（自动分页加载）
Vue实现ECharts柱状图数据轮播(自动分页加载) vue <div id="main"></div>``` js import echarts fro ...
AI一分钟 | 李开复：AI创业公司估值今年会降20%~30%；谷歌让搜索结果加载速度提升两倍...
▌李开复:AI 创业公司估值今年会降 20%~30% 创新工场创始人李开复的新书<AI·未来>昨天正式全球发售,在发布现场,李开复谈到目前国内 AI 创业企业现状时表示,今年国内 AI 创 ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 1 data() { 2 return { 3 lo ...

vue+element实现Select 选择器的远程搜索、滚动加载

vue+element实现Select 选择器的远程搜索、滚动加载相关推荐

最新文章

热门文章