需求
下拉数据需要调取后台接口获取，但是数据太多不能一次加载出来，所以只能每次查询出一定条数的数据，再根据指定条件去查询需要的数据，可以进行下拉选择
解决方式
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>
remote-method：远程搜索方法
remote ：是否为远程搜索
loading：是否正在从远程获取数据
change：选中值发生变化时触发
js代码
//项目对象数据
projectLoading: false,
// 项目列表数据
projectOptions: [],
/** 根据项目名称查询项目信息 */
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);
},
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/202834.html
