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

@

提示:本文仅供学习交流,请勿用于非法活动!

前言

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

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

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

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

二、使用步骤

1.ElementUI代码

代码如下(示例):


下单仓库、商品类别、开票单位都是通过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 night!

欢迎点赞、关注、留言,一起学习、交流!

Original: https://www.cnblogs.com/folyh/p/16513248.html
Author: folyh
Title: ElementUI多重条件、嵌套条件查询

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/607764/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • StringUtils工具类

    1、 public static boolean isEmpty(String str) 判断某字符串是否为空 3、public static boolean isBlank(St…

    Java 2023年6月5日
    066
  • SpringBoot 2.x 开发案例之前后端分离鉴权

    前言 阅读本文需要一定的前后端开发基础,前后端分离已成为互联网项目开发的业界标准使用方式,通过 Nginx代理+Tomcat的方式有效的…

    Java 2023年5月30日
    081
  • Spring源码学习笔记5——注册BeanPostProcessor,初始化事件多播器,注册事件监听器

    一丶前言 上篇Spring容器回调完所有的BeanFactoryPostPocessor,之后可以做到替换所有占位符,解析所有配置类等工作,这篇还会迎来一个Spring留给我们扩展…

    Java 2023年6月14日
    082
  • TortoiseGit的使用

    简介 TortoiseGit是一款Git图形界面工具。 TortoiseGit的基本配置 安装好TortoiseGit后在任意目录下右击 汉化:前提安装中文包。note:下图中安装…

    Java 2023年6月15日
    061
  • docker:nginx+confd动态生成配置

    docker:nginx+confd动态生成配置当我们项目越来越多时手动去服务器修改nginx配置是一件很麻烦而且可能出错的事情。我们可以通过 nginx+confd+&#…

    Java 2023年6月5日
    087
  • HttpClient 在vivo内销浏览器的高并发实践优化

    作者:vivo 互联网服务器团队- Zhi Guangquan HttpClient作为Java程序员最常用的Http工具,其对Http连接的管理能简化开发,并且提升连接重用效率;…

    Java 2023年6月15日
    069
  • 68.可能否

    sfsd posted @2022-09-28 08:39 随遇而安== 阅读(5 ) 评论() 编辑 Original: https://www.cnblogs.com/55zj…

    Java 2023年6月7日
    081
  • 多线程案例 : 等待别人到达开饭

    这里我们要把别人当作一个线程。当每一个线程开启时,我们指定一个点,让他们同时到达并执行,所以使用CyclicBarrier设定一个障碍,并设置这个障碍的参数,指定规则由多少个线程同…

    Java 2023年6月7日
    072
  • 设计模式 14 模板模式

    模板模式(Template Pattern)属于 行为型模式 在生活中常常会遇到这样的情况,做某一件事情,有些步骤是固定的,有些步骤的变化的。 比如去医院看病, 挂号和 排队这两个…

    Java 2023年6月6日
    081
  • JDK成长记7:3张图搞懂HashMap底层原理!

    HashMap基本原理和优缺点 HashMap基本原理和优缺点 一句话讲, HashMap底层数据结构,JDK1.7数组+单向链表、JDK1.8数组+单向链表+红黑树。 HashM…

    Java 2023年6月5日
    092
  • 阿里云服务器中MySQL数据库被攻击

    前几天刚领了一个月的阿里云服务器玩,在里面装了MySQL,然后这几天找了个小项目练习着玩呢,就将表建在里面了。刚访问添加员工还好好的,刚给员工分页查询呢 ,啪一下 ,很突然昂 ,就…

    Java 2023年6月15日
    095
  • 基于alpine构建jdk镜像遇到的坑

    alpine常用于作为 docker的基础镜像,因为它很小,功能精简,基本上没有啥漏洞,记录一下最近用 alpine作为基础镜像构建 java 8镜像 下面的问题在 oracle …

    Java 2023年6月16日
    062
  • 【校招VIP】[前端][二本][6分]简历的板式比较标准

    关注【校招VIP】 公众号,回复【简历】 ,添加校招顾问微信,即可获取简历指导! 本份简历是一位21届二本前端同学的简历,简历评分6分。 一、学员简历 二、指导意见 简历的版式没有…

    Java 2023年6月5日
    081
  • Python复制Excel表格图片

    import osimport timeimport pyautoguiimport win32com.client as win32# 发送函数def fz(app,bk): x…

    Java 2023年6月16日
    084
  • 【Java面试手册-基础篇】能否在Java中终止main方法?

    答案是肯定的,可以使用 System.exit() 方法终结 main() 方法。 示例代码如下: package com.magic.main; public class Mai…

    Java 2023年6月8日
    072
  • Session Cookie Token Json-Web-Token

    什么是认证(Authentication) 通俗地讲就是 验证当前用户的身份,证明”你是你自己”(比如:你每天上下班打卡,都需要通过指纹打卡,当你的指纹和系…

    Java 2023年6月7日
    083
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球