今天分享一篇在 ElementPlus 中使用 el-form 动态切换校验规则 的实用方法。 一、问题概述 作为前端开发人员,在开发项目中,特别是后台管理系统,表单的使用是必不可少的。当业务需求复杂时,常常需要根据不同的参数动态切换校验规则。 当动态切换校验规则时,可能会出现一些意想不到的状况, 比如: 问题1 如果触发了一...
虽然两者之间有一些变化,但是如果您已经熟悉了 ElementUI 的el-form组件,那么您将会很快地适应 Element Plus 的使用。 el-form是 Element Plus 中的表单组件,以下是el-form常用的属性和方法: 常用属性 model:用于绑定表单数据对象,可以使用v-model绑定到表单元素。例如,<el-input v-model="formData.username"></...
el-form表头数据举例 子组件表单数据根据根据父组件传递过来的formHeader动态渲染。即v-for中搭配v-if去呈现,先简单看一下formHeader数据结构,具体在后边代码中都有的 // 表头数组数据 formHeader: [ { itemType: "text", // 输入框类型 labelName: "姓名", // 输入框名字 propName: "name", // 输入框...
<el-form-item label="姓名" :prop="'formItemArr.' + index + '.name'" :rules="{ required: true, message: '请填写', trigger: 'blur', }" > ... 完整代码 演示的话,大家直接复制粘贴即可 <template> <div class="box"> <el-button @click="addForm" size="mini" type="primary" plain ...
封装el-form 目前在编写项目中,每个页面都有el-from,所以对el-form做了二次封装, 组件在个人开发使用不错,但不确定能满足各种业务需求,所以这里主要和大家分享一下设计思路。用一次爽一次,越用越爽。 分析问题: el-form是element-ui库的表单组件,如果我们要将其进行二次封装,那么需要考虑几个问题: ...
而且不同的el-form里面有部分el-form-item是相同的,于是就想把这部分相同的el-form-item封装成一个el-form即组件d2-page-form。为什么要封装成一个el-form?因为需要配置rules。d2-page-form是页面原来的el-form的子组件。在封装组件A的过程中,又想到了把el-form二次封装,这样就可以满足页面中不再写el-form...
el-form 是Element UI 库中的一个组件,用于创建表单。Element UI 是一个基于 Vue.js 的高质量组件库,广泛应用于前端开发中,以提升开发效率和用户体验。 基础概念 el-form 组件用于包裹表单元素,如输入框、选择框、单选框等,并提供表单验证功能。它通过 model 属性绑定表单数据对象,通过 rules 属性定义验证规则。
当el-form 里边只有一个el-form-item的时候,输入内容回车刷新整个页面。 代码语言:javascript 复制 <el-form:model="queryParams"ref="queryRef"><el-form-item label="文章类型"prop="typeName"><el-input v-model="queryParams.typeName"placeholder="请输入文章类型名称"clearable ...
<el-button>取消</el-button> </el-form-item> </el-form> 需要用el-form标签将表单控件包裹起来,每个控件使用el-form-item标签包裹起来,这样产生的表单就会比较整齐。 3. 行内表单 有时候希望将表单的控件尽量显示到一行,以节约空间,借助inline属性即可实现。
这篇文章是el-form与el-upload结合上传带附件的表单数据(后端篇)-CSDN博客姐妹篇,后端篇文章主要讲的是后端的实现逻辑,前端篇稍微简单一些,其实最主要的就是封装el-upload组件,供具体的表单组件调用。 2.封装el-upload组件 废话不多说,直接上代码。 <template> <div class="upload-file"> <el-upload :multiple...