草庐IT

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

folyh 2023-03-28 原文

@

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


前言

本文大概内容:
例如:随着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 night!

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

有关ElementUI多重条件、嵌套条件查询的更多相关文章

  1. ruby - ECONNRESET (Whois::ConnectionError) - 尝试在 Ruby 中查询 Whois 时出错 - 2

    我正在用Ruby编写一个简单的程序来检查域列表是否被占用。基本上它循环遍历列表,并使用以下函数进行检查。require'rubygems'require'whois'defcheck_domain(domain)c=Whois::Client.newc.query("google.com").available?end程序不断出错(即使我在google.com中进行硬编码),并打印以下消息。鉴于该程序非常简单,我已经没有什么想法了-有什么建议吗?/Library/Ruby/Gems/1.8/gems/whois-2.0.2/lib/whois/server/adapters/base.

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列,每个键都有一个数组,例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案,递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  4. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  5. ruby-on-rails - 在 Rails 和 ActiveRecord 中查询时忽略某些字段 - 2

    我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道,是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔?posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr

  6. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具,作为不接受任何输出的更大程序的一部分,以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改,我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  7. ruby - 定义方法参数的条件 - 2

    我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法,我该如何引发错误??通常,我如何定义方法参数的条件?比如我想在调用的时候报错:my_method(1) 最佳答案 您可以添加guard在函数的开头,如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano

  8. Ruby——嵌套类和子类是一回事吗? - 2

    下面例子中的Nested和Child有什么区别?是否只是同一事物的不同语法?classParentclassNested...endendclassChild 最佳答案 不,它们是不同的。嵌套:Computer之外的“Processor”类只能作为Computer::Processor访问。嵌套为内部类(namespace)提供上下文。对于ruby​​解释器Computer和Computer::Processor只是两个独立的类。classComputerclassProcessor#Tocreateanobjectforthisc

  9. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个,因为它显然有一个缺点?我有一种直觉,它可能与性能有关,因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是,据我所知,没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别,可能也是最著名的,是你的

  10. ruby-on-rails - 使用回形针的嵌套形式 - 2

    我有一个名为posts的模型,它有很多附件。附件模型使用回形针。我制作了一个用于创建附件的独立模型,效果很好,这是此处说明的View(https://github.com/thoughtbot/paperclip):@attachment,:html=>{:multipart=>true}do|form|%>posts中的嵌套表单如下所示:prohibitedthispostfrombeingsaved:@attachment,:html=>{:multipart=>true}do|at_form|%>附件记录已创建,但它是空的。文件未上传。同时,帖子已成功创建...有什么想法吗?

随机推荐