Element Select 选择器加分页

最新推荐文章于 2025-06-03 10:46:04 发布

原创最新推荐文章于 2025-06-03 10:46:04 发布 · 2.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

element

14 篇文章

订阅专栏

本文介绍如何在前端应用中实现带有分页功能的模糊搜索下拉菜单，包括使用Element UI组件的具体配置方法，以及后端接口请求的处理过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
这里是模糊搜索下拉菜单，带上分页功能

<el-select v-model="Stateval"
								   filterable
								   remote
								   size="mini"
								   reserve-keyword
								   placeholder="请输入关键词"
								   :remote-method="remoteMethod"
								   :loading="loading"
								   clearable
								  style="width: 220px;"
								  >
							<el-option v-for="item in dddd"
									   :key="item.value"
									   :label="item.label"
									   :value="item.value">
							</el-option>
							<el-pagination
							       
							       @current-change="handleCurrentChange2"
							       :page-size="3"
							      layout="prev, pager, next"
							       :total="totalnum">
							    </el-pagination>
						</el-select>

data中需要的字段

			loading:false,
			dddd: [],
			states: [],
			list: [],
			totalnum:15,
			queryName:'',

remoteMethod(query) {
			var that = this;
			that.queryName = query
			let params ={
				name:query,
				pageIndex: 1,
				pageSize: 3,
				runState:0,
			}
			//这里是接口请求
			GetCourseByPageAdmin(params).then(res=>{
				console.log(res)
				that.states = res.data.data;
				that.totalnum = res.data.count;
				that.list = that.states.map(item => {
				//这里是改变字段名称，加拼接，不需要的话，只写id和显示的name即可
					return { value: item.id, label: item.name + 　'（'+item.day+'）' 　+ item.startTime + '-' + item.endTime};
				});
			})
		
			setTimeout(() => {
				if (query !== '') {
					that.loading = true;
					setTimeout(() => {
						that.loading = false;
						that.dddd = that.list.filter(item => {
		
							return item.label.toLowerCase()
								.indexOf(query.toLowerCase()) > -1;
						});
					}, 400);
				} else {
					that.dddd = [];
				}
			}, 100);
		},





//分页方法
handleCurrentChange2(val) {
		       //console.log(`当前页: ${val}`);
			   let that = this
		       this.currentPage=val;
			   let params ={
			   	name:that.queryName,
			   	pageIndex: val,
			   	pageSize: 3,
			   	runState:0,
			   }
			   GetCourseByPageAdmin(params).then(res=>{
				   console.log(res)
				   that.states = res.data.data;
				   that.list = that.states.map(item => {
				   	return { value: item.id, label: item.name + 　'（'+item.day+'）' 　+ item.startTime + '-' + item.endTime};
				   });
					setTimeout(() => {
						that.dddd = that.list.filter(item => {
					
							return item.label.toLowerCase()
								.indexOf(that.queryName.toLowerCase()) > -1;
						});
					}, 100);  
			   })
		   },