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:rem
·
1、html结构:
<el-select
v-model.trim="query.enEnterpriseBaseId"
v-loadmore="loadMore"
clearable
filterable
placeholder="企业名称"
@visible-change="getEnterpriseName"
style="margin-right:8px;width:230px"
remote
:remote-method="remoteMethod">
<el-option
v-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.clientHeight
if (CONDITION) {
binding.value()
}
})
}
})
}
更多推荐
已为社区贡献6条内容
所有评论(0)