element-ui实现搜索下拉框_element 搜索框

需求

下拉数据需要调取后台接口获取，但是数据太多不能一次加载出来，所以只能每次查询出一定条数的数据，再根据指定条件去查询需要的数据，可以进行下拉选择

解决方式

html代码

<el-form-item label="项目名称" prop="projectName">
      <el-select v-model="form.projectName" 
      			placeholder="请选择项目名称"  
      			clearable 
      			filterable 
      			remote 
      			:remote-method="getProjectOptions" 
      			:loading="projectLoading" 
      			@change="changeProjectCode"
                :style="{width: '100%'}">
			<el-option v-for="(item,index) in projectOptions" 
			:key="index" 
			:label="item.projectCode +'-'+ item.projectName +'-'+ item.projectLeader"
			:value="item" 
			:disabled="item.disabled">
			</el-option>
	</el-select>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

说明：element-ui select 选择器

remote-method：远程搜索方法
remote ：是否为远程搜索
loading：是否正在从远程获取数据
change：选中值发生变化时触发

js代码

//项目对象数据
projectLoading: false,
 // 项目列表数据
 projectOptions: [],
1
2
3
4

   /** 根据项目名称查询项目信息 */
    getProjectOptions(projectName) {
        this.projectLoading = true;
        this.queryParams.projectName = projectName ? projectName : null;
        setTimeout(() => {
          this.projectLoading = false;
          listSysProjectManage(this.queryParams).then((response) => {
            const sysProjectOptions = response.rows;
            this.projectOptions = sysProjectOptions;
          });
          this.queryParams.projectName = null;
        }, 200);
    },
    changeProjectCode(item){
      this.form.projectName=item.projectName;
      this.form.projectCode=item.projectCode;
      this.getProjectOptions(this.form.projectName);
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18