文章目录

前言
一、ElementUI如何通过选择的条件，进行公司(或产品等)的模糊查询+下拉框选择？
二、使用步骤
- 1.ElementUI代码
- - 下单仓库、商品类别、开票单位都是通过select+option下拉框选择。
  - - 1.1 其中商品类别是固定的，就直接通过typeOptions写死选择就行。
    - 1.2 下单仓库则通过方法getWarehousList()后台实时获取最新数据（具体见下面js代码中）
    - 1.3 而开票单位则将前面选择好下单仓库、商品类别作为参数，通过方法getCompanyIdList(filterParams.warehouseid,filterParams.type)后台实时获取，而且在输入框模糊匹配（具体见下面js代码中）。
- 2.js代码

提示：本文仅供学习交流，请勿用于非法活动！

前言

本文大概内容：
例如：随着elementui的广泛应用，用户的的操作越来越简化。本文主要针对用户下拉框选项需要请求后台数据获得，而且后面的下拉框选项需要在前面的多个条件选择基础上，再通过请求后态数据才能获得。而期间用户如何连一个提交操作都没有就能获得查询条件？

一、ElementUI如何通过选择的条件，进行公司(或产品等)的模糊查询+下拉框选择？

示例：如下图，我们需要对下单仓库、商品类别两个条件选择好的前提下，再进行开票单位（即供应商）的模糊查询+下拉框选择。

二、使用步骤

1.ElementUI代码

代码如下（示例）：

                    <el-form-item label="下单仓库" prop="warehouseid"><el-select size="mini" v-model="filterParams.warehouseid" clearable filterable><el-option v-for="warehousenameItem in warehousenameOptions" :key="warehousenameItem.id":label="warehousenameItem.warehouseName":value="warehousenameItem.id"></el-option></el-select></el-form-item><el-form-item label="商品类别" prop="type"><el-select size="mini" v-model="filterParams.type" clearable filterable@change="getCompanyIdList(filterParams.warehouseid,filterParams.type)" ><el-option v-for="typeItem in typeOptions" :key="typeItem.id":label="typeItem.name" :value="typeItem.id"></el-option></el-select></el-form-item><el-form-item label="开票单位" prop="companyId"><el-select size="mini" v-model="filterParams.companyId" clearable filterable@focus="companyOnFocus()"><el-option v-for="companyNameItem in companyIdOptions" :key="companyNameItem.id":label="companyNameItem.name" :value="companyNameItem.id"></el-option></el-select></el-form-item>

下单仓库、商品类别、开票单位都是通过select+option下拉框选择。

1.1 其中商品类别是固定的，就直接通过typeOptions写死选择就行。

 typeOptions: [{id: '0',label: 'A类'}, {id: '1',label: 'B类',}]

1.2 下单仓库则通过方法getWarehousList()后台实时获取最新数据（具体见下面js代码中）

1.3 而开票单位则将前面选择好下单仓库、商品类别作为参数，通过方法getCompanyIdList(filterParams.warehouseid,filterParams.type)后台实时获取，而且在输入框模糊匹配（具体见下面js代码中）。

2.js代码

上述获取下单仓库、获取开票单位代码如下（示例）：

         getWarehousList: function () {// 获取实例var _this = this;// 请求用户下拉框选项数据_this.doGetData(_this.getWarehousUrl, {}, function (r) {_this.warehousenameOptions = r.data;});},getCompanyIdList: function (warehouseid,type) {// 获取实例var _this = this;// 请求产品代码下拉框选项数据_this.doGetData(_this.getcompanyIdUrl, {warehouseId: warehouseid,type:type}, function (r) {_this.companyIdOptions = r.data;});},

该处使用的url网络请求的数据。

随心所往，看见未来。Follow your heart，see light！

欢迎点赞、关注、留言，一起学习、交流！

ElementUI多重条件、嵌套条件查询相关推荐

python中多重if语句用法_python-循环语句的简单条件语句、多重条件语句和嵌套条件语句编写...
1. 简单if-else语句例1:要求用户输入两个数,计算两数的和.如果这两个数的和大于100,则输出"两数和大于100",否则输出"两数和小于100". 程 ...
sql 触发器嵌套条件_SQL Server中的嵌套触发器
sql 触发器嵌套条件 Nested Triggers in SQL Server are actions that automatically execute when a certain data ...
es ik 多字段查询_SpringBoot使用注解的方式构建Elasticsearch查询语句，实现多条件的复杂查询...
背景&痛点通过ES进行查询,如果需要新增查询条件,则每次都需要进行硬编码,然后实现对应的查询功能.这样不仅开发工作量大,而且如果有多个不同的索引对象需要进行同样的查询,则需要开发多次,代码复 ...
猫哥教你写爬虫 006--条件判断和条件嵌套
流程控制复仇者联盟3-无限战争(搜集宝石) python里面, 不需要使用;来结尾, 因为python是使用换行来结束一行代码的 if判断, 没有{}, python使用缩进来表示层级关系 if.. ...
Spring Data JPA 复杂/多条件组合分页查询
推荐视频: http://www.icoolxue.com/album/show/358 public Map<String, Object> getWeeklyBySearch(fina ...
spring data jpa实现有条件的分页查询功能
spring data jpa实现有条件的分页查询功能前端部分代码.发送请求: $('#grid').datagrid({iconCls: 'icon-forward',fit: true,bord ...
外连接就是允许不满足条件的字段查询出来
外连接就是允许不满足条件的字段查询出来转载于:https://www.cnblogs.com/classmethond/p/10129069.html
如何以卫语句取代嵌套条件表达式
本文分享自华为云社区<以卫语句取代嵌套条件表达式 (Replace Nested Conditional with Guard Clauses)>,作者:JavaEdge. 动机条件表达 ...
mysql null 查询条件_MySql当查询条件为空时不作为条件查询
之前遇到一个很麻烦的条件查询.就是有很多个条件,并且条件可能有,也有可能没有.又不是像mybatis那样又专门的SQL.xml文件,需要自己写sql文.这种情况下,需要去判断每个条件是不是为空,后来发 ...
MongoDB多条件分组聚合查询
MongoDB多条件分组聚合查询 1.样例数据 {"_id" : ObjectId("5fa13fb76c3107345a82c047"),"_cla ...

ElementUI多重条件、嵌套条件查询