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

最新推荐文章于 2024-04-12 18:30:00 发布
最新推荐文章于 2024-04-12 18:30:00 发布
阅读量500 收藏 11
点赞数 10
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57933935/article/details/135009498
版权 
 <el-form-item
              label="建设单位（甲方）"
              prop="constCompy"
              :rules="
                contform.contMainType == '3'
                  ? {
                      required: true,
                      message: '建设单位（甲方）不能为空',
                      trigger: 'blur',
                    }
                  : {}
              "
            >
吃西瓜不吐籽_
关注
  • 10
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue用elementui写form表单时,在label里添加空格操作
10-14
主要介绍了vue用elementui写form表单时,在label里添加空格操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【element-ui】form表单动态修改rules校验项
小墨鱼的前端问题录
09-21 2067
增加rules校验项。删除rules校验项。
vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法
最新发布
.伊泽瑞尔
04-12 573
vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法
动态控制form表单中的rules规则
m0_70097789的博客
08-03 380
今天遇到了一个需求,当业务类型不同为特定的值时,表单规则要限制或者不限制输入内容。当然了也可以用element-ui el-select中的@change事件。通过判断是否符合情况进而来更改data里面rules中的规则。方法很简单,这里记录一下吧。
element-ui form表单的动态rules校验
weixin_45849417的博客
07-24 2215
在vue 项目中，有时候可能会用到element-ui form表单的动态rules校验，比如说选择了哪个选项，然后动态显示或者禁用等等。 我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理（每一个form-item项都可以单独校验）。
vue2：elementUI中Form 表单在特定情况下做动态rules添加删除
weixin_63515766的博客
01-17 5539
vue2：elementUI中Form 表单在特定情况下做动态rules添加删除 使用this.$set()和this.$delete()
element ui 动态添加表单实现验证规则
qwyio的博客
11-14 8136
动态增减表单验证规则的实现和思路，简单实现表单的增删 ，并且对新增表单项及默认表单项进行必填项校验
动态绑定表单的rules---element-ui
zhu_liu_kun的博客
05-29 2116
指令来动态绑定表单数据和验证规则。要动态删除绑定的验证规则，可以通过修改。当你单击“Remove Name Rule”按钮时，将会删除。例如，假设你有一个简单的表单组件，它使用。在上面的代码中，我们添加了一个名为。在 Vue 3 中，你可以使用。的 $rules 属性来实现。
element ui的动态校验的写法（变量动态校验，动态提示信息）与注意事项
qq3892997的博客
11-14 1604
element ui的动态校验的写法（变量动态校验，动态提示信息）与注意事项
vue：element-ui表单动态验证规则
coinisi_li的博客
01-22 2726
实现当是否发送消息选择是时，业务类型字段必填。
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作Elem
07-24
ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单...
JavaScript实现动态添加Form表单元素的方法示例
10-19
主要介绍了JavaScript实现动态添加Form表单元素的方法,结合实例形式分析了javascript表单元素操作相关函数使用方法与相关注意事项,需要的朋友可以参考下
elementUI自带的表单验证---解决特定情况下忽略指定表单项的验证
string佳佳的博客
03-25 4100
html部分 <el-form :model="form" :rules="rules" ref="form" label-width="100px"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name" placeholder="请输入姓名"&gt...
使用 vue element UI 框架对form内容 rules动态验证非空
向着太阳微笑
12-08 1976
<!-- 审核对话框 --> <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible"> <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-wi.
element-ui 循环表单，根据不同的条件，添加动态表单校验功能
qq_36437172的博客
07-12 3631
需求：根据用户的选择的运输方式，动态改变输入框的输入条件，并且整个表单是可以循环添加多项，实现对数据批量校验。 效果图如下： 首先，表单可以新增加，则是一个循环表单；给 el-form-item 加上 prop 属性，对每一组中的这一项都进行校验。 <div v-for="(k,index) in formData.lists"> <template> <el-form-item label="运输方式" :prop="'list
elform 动态 rules
carbonzhao的专栏
05-03 4029
前端由于某些需求场景需要，部分表单的渲染是通过 v-for循环渲染显示，此时如何实现表单验证呢？如下，点击第一行的+号可以动态的增加更多行表单，不同于单一固定的表单行[参见下文一般情况下]，我们可以通过固定的prop绑定来验证，多行动态时，则无法使用原有方案进行验证！！！页面代码实现如下：注意:此处的el-form-item管理着三个表单元件！！提示时只使用一个el-form-item携带的提示框！！！其核心代码块则为：不需要指定prop，内部直接使用遍历的item访问其值做出判断给出反馈信息即可。
elementui form 动态表单
06-28
### 回答1： ElementUI 是一个基于 Vue.js 的 UI 组件库，它提供了一个 Form 表单组件，可以用于创建动态表单。 要创建一个 ElementUI 的动态表单，你需要定义一个包含表单项的数据模型。这个数据模型可以是一个数组，每个元素代表一个表单项，包括它的类型、默认值、选项等等。 然后，你可以在模板中使用 v-for 指令，根据数据模型动态地渲染出表单项。对于每个表单项，你可以根据它的类型选择合适的组件，比如 input、select、radio 等等。 最后，你需要定义一个提交表单的方法，将表单数据发送到后端进行处理。你可以通过 ElementUI 的 Form 组件提供的 submit 方法来完成这个过程。 总的来说，使用 ElementUI 创建动态表单的步骤包括定义数据模型、动态渲染表单项、选择合适的组件、定义提交表单的方法。 ### 回答2： ElementUI 是一款流行的 UI 组件库，它提供了许多实用的组件供开发者使用。其中，Form 组件是用于表单数据提交的组件，而 ElementUI 还提供了一个可以动态生成表单的组件 DynamicForm，使得开发者能够更加灵活地构建页面。 动态表单是指表单的字段和内容可以在运行时动态修改或生成。通常在实现动态表单的时候，需要从后端获取表单的模板，并根据模板动态生成表单元素。 ElementUI 的 DynamicForm 组件能够根据传入的表单模板动态生成表单元素，并支持表单元素之间的联动。在使用 DynamicForm 组件之前，需要定义表单模板，包括每个表单元素的类型、属性、验证规则等信息。 DynamicForm 组件使用示例： ```html <template> <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="120px"> <el-card shadow="hover"> <el-row v-for="(item, index) in formTemplate" :key="index"> <el-col :span="12"> <el-form-item :prop="item.key" :label="item.label"> <el-component :is="item.type" :options="item.options" v-model="form[item.key]" /> </el-form-item> </el-col> </el-row> </el-card> <el-button type="primary" @click="submitForm()">提交</el-button> </el-form> </template> <script> import { DynamicForm } from 'element-ui'; export default { components: { 'el-component': DynamicForm }, data() { return { form: {}, rules: {}, formTemplate: [ { type: 'el-input', key: 'name', label: '姓名', options: { placeholder: '请输入姓名', clearable: true } }, { type: 'el-radio', key: 'gender', label: '性别', options: { options: [ { label: '男', value: 'male' }, { label: '女', value: 'female' }, ] } } ] }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过，提交表单数据 console.log(this.form); } }); } } }; </script> ``` 在上面的示例中，我们使用了 DynamicForm 组件来显示两个表单元素：输入框和单选框。表单模板由 formTemplate 数组定义，每个元素包括 type、key、label 和 options 等参数，用于动态构造表单元素。表单数据存储在 form 中，而 rules 则是表单验证规则。 通过定义不同的表单模板，可以动态生成各种表单元素，例如日期选择器、下拉框、多选框等，非常方便。同时，DynamicForm 组件还支持表单元素之间的联动，例如选择省份后动态生成城市列表等。 ### 回答3： ElementUI Form 动态表单是指根据不同数据源的情况动态创建表单，以满足数据展示和编辑的需求。在实际应用中，不同的数据源可能包括数据库、API 接口、本地文件等。 动态表单的实现需要借助 ElementUI 提供的动态表单组件来完成。该组件通过传入一个包含表单字段信息的数组，动态渲染出对应的表单。表单字段数组中的每一个元素都代表一个表单字段，包括字段名、字段类型、字段校验规则等。开发者可以通过修改数组的内容来实现对表单的更新。 常见的动态表单场景包括表单设计工具、自定义化表单（如报表）、表单提交等。相比于静态表单，动态表单具有更强的灵活性和适用性，可以有效地减轻开发工作量，提高应用的性能和用户体验。 使用 ElementUI Form 动态表单，需要掌握 ElementUI Form 组件的相关属性和方法，了解数据源的结构和格式，以及熟悉 JS 动态生成表单的基本原理和方法。同时，为了保证表单的可维护性和扩展性，开发者需要规范、清晰地定义表单字段的属性和规则，并且对常见场景进行充分的测试和验证。 总之，ElementUI Form 动态表单是一项非常实用的开发技术，在应用开发中有着重要的作用。开发者应当熟练掌握相关知识和技巧，灵活运用动态表单技术，提高应用的质量和效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吃西瓜不吐籽_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值