草庐IT

vue2：elementUI中Form 表单在特定情况下做动态rules添加删除

peachSoda7 2023-06-07 原文

先看需求：（不想看的直接拉到最后）

 【需求说明】

6、如状态为上架时，库存为必填，下架状态时，库存为可填，前面无星号

实现方法：使用this.$set()和this.$delete()

上代码：

由于设计商业隐私，代码只上传一部分：
 

<el-form :model="commodityForm" ref="commodityForm" :rules="rules" label-width="120px">
      
        其他字段......

        <el-form-item label="上下架状态" prop="status">
          <el-switch
            v-model="commodityForm.status"
            :active-value="1"
            :inactive-value="0"
            @change="switchChange"
            >
          </el-switch>
        </el-form-item>
      </el-form>

表单data中原来的rules：

      // 表单校验
      rules:{
        name: [{ required: true, message: "请输入商品名称", trigger: ['blur','change']}],
        title: [{ required: true, message: "请输入商品标题", trigger: ['blur','change']}],
        commodityFormImg:[{ required: true, message: '请上传商品图片', trigger: 'change'}],
        typeId: [{ required: true, message: '请选择所属分类', trigger: 'change'}],
        brandId: [{ required: true, message: '请选择商品品牌', trigger: 'change'}],
        specification: [{ required: true, message: '请选择商品规格', trigger: ['blur','change']}],
        sellingPrice: [{ required: true, message: '请输入销售价', trigger: ['blur','change']}],
        // stock: [{ required: true, message: '请输入库存', trigger: ['blur','change']}],
        detail: [
          { required: true, message: "商品详情不能为空", trigger: "blur" },
          { validator: validateEditor, trigger: 'blur,change' }
        ]
      },

不添加上下架状态的rules

在change事件中进行判断：重点方法在这里！！！！！！！！！！

    // 上下架开关事件
    switchChange(e) {
       if(e != 1) {
        //删除校验的关键的两行代码（两行都要！！！！！！！！！！！！！！！）
        // 这个只能删除文字提示，但是星号还在,
        this.$refs["commodityForm"].clearValidate(["stock"]);
        // 这个只能删除星号提示，但是文字还在
        this.$delete(this.rules,'stock');
       }else{
         //添加校验代码（！！！！！！！！！！！！！！！）
        this.$set(this.rules,'stock',[{ required: true, message: '请输入库存', trigger:      
         ['blur','change']}])
       }
    }

动态添加删除rules

2023-1-29二更一个最新的方法：

 <el-form-item label="库存" prop="stock" :rules="commodityForm.status == 1 ? { required: true, message: '请输入库存', trigger: ['blur','change']} : {}">
          <el-input v-model.trim="commodityForm.stock" @input="commodityForm.stock = commodityForm.stock.replace(/[^\d]/g, '')" size="small" placeholder="请输入库存"></el-input>
        </el-form-item>

感谢我的好同事教我做事哈哈哈

 :rules="commodityForm.status == 1 ? { required: true, message: '请输入库存', trigger: ['blur','change']} : {}"

同时方法中的代码留一个：

   switchChange(e) {
       if(e != 1) {
        this.$refs["commodityForm"].clearValidate(["stock"]);
       }
    }

elementUIrulesxff3934vue.js前端

有关vue2：elementUI中Form 表单在特定情况下做动态rules添加删除的更多相关文章

  1. 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

  2. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  3. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  4. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  5. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  6. ruby-on-rails - rails : How to make a form post to another controller action - 2

    我知道您通常应该在Rails中使用新建/创建和编辑/更新之间的链接，但我有一个情况需要其他东西。无论如何我可以实现同样的连接吗？我有一个模型表单，我希望它发布数据(类似于新View如何发布到创建操作)。这是我的表格prohibitedthisjobfrombeingsaved: 最佳答案 使用:url选项。=form_for@job,:url=>company_path,:html=>{:method=>:post/:put} 关于ruby-on-rails-rails:Howtomak

  7. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  8. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  9. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  10. ruby - 在不使用 RVM 的情况下在 Mac 上卸载和升级 Ruby - 2

    我最近决定从我的系统中卸载RVM。在thispage提出的一些论点说服我:实际上，我的决定是，我根本不想担心Ruby的多个版本。我只想使用1.9.2-p290版本而不用担心其他任何事情。但是，当我在我的Mac上运行ruby--version时，它告诉我我的版本是1.8.7。我四处寻找如何简单地从我的Mac上卸载这个Ruby，但奇怪的是我没有找到任何东西。似乎唯一想卸载Ruby的人运行linux，而使用Mac的每个人都推荐RVM。如何从我的Mac上卸载Ruby1.8.7？我想升级到1.9.2-p290版本，并且我希望我的系统上只有一个版本。 最佳答案

随机推荐