el-select 组件 懒加载 可远程搜索

用于分页数据的懒加载 vue+elment
新建elSelct.vue 组件








然后再页面引用
hasAll 是否显示全部2个字 is-concat 是否拼接 concat-symbol拼接符号 is-multiple是否多选 label 字段名称1 labelTwo 字段名称2 valueString要获取的value值,是id还是projectCode options显示的数据 @loadMore加载更多 的方法 @remoteMethod远程请求的方法 @change方法
[{name:'我是名称’,projectCode:‘0121’,id:1}]




import YSelect from '@/views/components/elSelect/index'
export default {
components: {YSelect},
data:{
	return(){
	projectPageNum:0
	}
},
mounted() {
this.projectSearch()
},
methods: {
//清除
contractClear(){},
//下拉框选中完成后
			visibleChange(status) {},
			//下拉框改变时
			selectChange(){},
			//项目号 懒加载 下拉加载更多
			loadMore(page) {
				let that=this
				that.projectPageNum =page
			    this.projectSearch('',true)
			},
			//项目号 下拉框的远程搜索
			remoteMethod(query, page) {
			  this.projectPageNum = page
			    this.projectSearch(query,false)
			},
			/**项目号搜索 列表展示*/
			projectSearch(val, lazy = false) {
				let that = this
				if (lazy == false) { // 如果不是懒加载,
					this.projectList = [] // 把select选项数组重置为空
					that.projectPageNum = 1 // 设置查询第一页,每页20条
				}
				//请求后台数据
				listInfo({
					search: val,
					pageSize: 30,
					pageNum: that.projectPageNum
				}).then(response => {
					that.projectList=response.rows
				});
			},
}
}

你可能感兴趣的:(vue.js,javascript,前端)