elementui 表单 el-form 的那些使用小技巧

原创 已于 2022-04-08 16:06:30 修改 · 5.1k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript

于 2022-04-08 15:32:16 首次发布
本文介绍了如何在Vue的el-form-item中使用自定义slot标签添加图标，并通过native属性绑定点击事件。展示了如何移除原有label并用图标和文字组合形成新的交互形式。

1. el-form-item的label旁加icon

去掉原先 el-form-item 上的 label，使用 slot= label 自定义即可。

<el-form-item prop="任务名称" required>
  <span slot="label">
    <i class="el-icon-connection"></i>
    <span style="color: #46a0fc;"> 任务名称 </span>
  </span>
</el-form-item>

2. 为 el-form-item 添加点击事件

给 Vue 组件绑定事件的时候，要加上native，否则不起作用，如果是普通的html元素，就不需要。

<el-form-item @click.native="showRelatedDemandModal">
  <span slot="label">
    <i class="el-icon-connection"></i>
    <span style="color: #46a0fc">
      任务名称
    </span>
  </span>
</el-form-item>
Elment-UI中Form表单（详细介绍如何使用表单并正确使用slot插槽）
百赢出品，必属精品
09-08 869
在 Element-UI 中，表单包含输入框单选框下拉选择多选框等用户输入的组件。使用表单，您可以收集、验证和提交数据。Element-UI 的组件是一个功能强大的表单组件，提供了各种表单输入控件及其验证功能。通过使用表单插槽，你可以自定义表单的布局和内容。下面是对 Element-UI 表单插槽的详细介绍，包括如何使用这些插槽来实现更复杂的表单布局和功能。用户注册和登录：处理基本的用户信息输入，如用户名、密码、邮箱等。数据录入。
Element-UI源码——Form表单
qq_43391730的博客
04-03 1596
Form表单 form.vue <template> <form class="el-form" :class="[ labelPosition ? 'el-form--label-' + labelPosition : '', { 'el-form--inline': inline } ]"> <slot></slot> </form> </template> <script> im
vue2的form利用插槽修改错误提示UI
wzp20092009的博客
06-06 956
很多时候我们使用el-form想修改下错误提示的UI，比如table中使用form校验这类场景下错误提示的UI调整就非常重要。
el-form表单点击回车浏览器刷新，回车提交问题
Hello_MrShu的博客
09-26 223
你听我跟你说，W3C有两条规定：规定一：当一个form元素中只有一个输入框时，在该输入框中按下回车，会提交该form表单。规定二：当一个form元素中只有一个button（原生的button）时，即使不绑定事件，点击该button也会提交表单。
element中el-form-item的slot为label设置el-button的click事件会冒泡到整个label
小马甲
10-09 3277
element中el-form-item的slot为label设置el-button的click事件会冒泡到整个label
Vue3指令篇 -- 通过实现Element Plus Form添加Tip提示
qq_41068362的博客
04-11 2734
正常情况下，如果我们想实现给每个 **Form Item** 添加提示，一般的UI设计如下图，一般都是类似于这样的在 label 后面添加一个图标，hover 显示对应的 Tip 内容。这样的话具体的代码实现如下。如果 Form 表单很多，这样就会导致这个文件的代码过于冗长。以此为初衷，下面我们将实现通过指令的方式在所有表单页为**所需的表单项**添加 Tip 提示组件。
<el-form class="search-form"> <el-form-item label="设备IP"> <el-input></el-input> </el-form-item> <el-form-item label="设备ID"> <el-input></el-input> </el-form-item> <el-form-item> <el-button type="primary">搜索</el-button> <el-button type="primary">重置</el-button> </el-form-item> </el-form>这个form我想设置输入框长度固定，输入框宽度固定，还有字体设置，两个按钮左右对称
09-27
我们正在使用Element Plus的el-form组件，需要设置输入框的固定长度和宽度、字体样式，以及让两个按钮左右对称。 根据用户提供的代码结构，我们可以通过以下方式实现： 1. 设置输入框的固定宽度：可以直接在el-...
<el-form class="search-form"> <el-form-item label="设备IP" class="form-item"> <el-input></el-input> <el-button type="primary" size="small">搜索</el-button> </el-form-item> <el-form-item label="设备ID" class="form-item"> <el-input></el-input> <el-button type="primary" size="small">搜索</el-button> </el-form-item> <el-form-item> <el-button type="primary">重置</el-button> </el-form-item> </el-form>怎么让搜索和input放在一行
09-27
- 注意按钮组原本在一个el-form-item里，现在我们要让三个el-form-item在同一行。 但是，用户之前的代码中，按钮是两个按钮在一个el-form-item里。现在我们要让这个按钮组的el-form-item和前面两个输入框的el-...
<el-form :model="MAFLForm" ref="MAFLForm" size="small" inline="true" v-show="MAFLShowCard"> <el-form-item label="纸箱"> <el-checkbox v-model="MAFLForm.WX">外箱</el-checkbox> <el-checkbox v-model="MAFLForm.ZH">中盒</el-checkbox> <el-checkbox v-model="MAFLForm.NH">内盒</el-checkbox> <el-checkbox v-model="MAFLForm.CH">彩盒</el-checkbox> <el-checkbox v-model="MAFLForm.GB">隔板</el-checkbox> <el-checkbox v-model="MAFLForm.BH">白盒</el-checkbox> <el-checkbox v-model="MAFLForm.ZSH">展示盒</el-checkbox> <el-checkbox v-model="MAFLForm.CX">衬箱</el-checkbox> </el-form-item> <el-form-item label="条码"> <el-checkbox v-model="MAFLForm.CPTM">产品条码</el-checkbox> <el-checkbox v-model="MAFLForm.ZBZTM">中包装条码</el-checkbox> <el-checkbox v-model="MAFLForm.WXTM">外箱条码</el-checkbox> <el-checkbox v-model="MAFLForm.NHTM">内盒条码</el-checkbox> </el-form-item> <el-form-item label="胶袋" prop="JD"> <el-checkbox v-model="MAFLForm.JD"></el-checkbox> </el-form-item> <el-form-item label="说明书" prop="SMS"> <el-checkbox v-model="MAFLForm.SMS"></el-checkbox> </el-form-item> <el-form-item label="彩标" prop="CB"> <el-checkbox v-model="MAFLForm.CB"></el-checkbox> </el-form-item> <el-form-item label="白纸" prop="BZ"> <el-checkbox v-model="MAFLForm.BZ"></el-checkbox> </el-form-item> <el-form-item label="封胶带" prop="FJD"> <el-checkbox v-model="MAFLForm.FJD"></el-checkbox> </el-form-item> <el-form-item label="打包带" prop="DBD"> <el-checkbox v-model="MAFLForm.DBD"></el-checkbox> </el-form-item> <el-form-item label="彩卡" prop="CK"> <el-checkbox v-model="MAFLForm.CK"></el-checkbox> </el-form-item> <el-form-item label="吊牌" prop="DP"> <el-checkbox v-model="MAFLForm.DP"></el-checkbox> </el-form-item> <el-form-item label="其它配件" prop="QTPJ"> <el-checkbox v-model="MAFLForm.QTPJ"></el-checkbox> </el-form-item> <el-form-item label="中包装袋" prop="ZBZD"> <el-checkbox v-model="MAFLForm.ZBZD"></el-checkbox> </el-form-item> <el-form-item label="硅胶" prop="GJ"> <el-checkbox v-model="MAFLForm.GJ"></el-checkbox> </el-form-item> <el-form-item label="PVC盒" prop="PVCH"> <el-checkbox v-model="MAFLForm.PVCH"></el-checkbox> </el-form-item> <el-form-item label="泡沫" prop="PM"> <el-checkbox v-model="MAFLForm.PM"></el-checkbox> </el-form-item> <el-form-item label="气泡纸" prop="QPZ"> <el-checkbox v-model="MAFLForm.QPZ"></el-checkbox> </el-form-item> <el-form-item label="收缩膜" prop="SSM"> <el-checkbox v-model="MAFLForm.SSM"></el-checkbox> </el-form-item> <el-form-item> <el-button type="primary" size="mini" @click="handleSaveMAFL">保存</el-button> </el-form-item> </el-form> 为什么将MAFLShowCard的值设为true后form表单不显示
03-15
用户使用的是Vue.js和Element UI的el-form组件。表单的显示由v-show="MAFLShowCard"控制，当这个值为true时，表单应该显示。但用户说即使设为true，表单还是不显示，所以可能存在几个问题。 首先，我应该检查...
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="90px"> <el-form-item label="服务单号" prop="seviceRecno"> <el-input v-model="form.seviceRecno" placeholder="请输入服务单号" @blur="fetchServiceInfo" clearable/> </el-form-item> <el-form-item label="服务请求ID" prop="serviceRequestId"> <el-input v-model="form.serviceRequestId" placeholder="获取服务请求ID" disabled/> </el-form-item> <el-form-item label="工程师ID" prop="engineerId"> <el-input v-model="form.engineerId" placeholder="获取工程师ID" disabled/> </el-form-item> <el-form-item label="操作类型" prop="actionType"> <el-input v-model="form.actionType" type="textarea" placeholder="请输入内容" /> </el-form-item> <el-form-item label="操作描述" prop="actionDescription"> <el-input v-model="form.actionDescription" type="textarea" placeholder="请输入内容" /> </el-form-item> <el-form-item label="使用零件" prop="partsUsed"> <el-input v-model="form.partsUsed" type="textarea" placeholder="请输入内容" /> </el-form-item> <el-form-item label="耗时(小时)" prop="hoursSpent"> <el-input v-model="form.hoursSpent" placeholder="请输入耗时(小时)" /> </el-form-item> <el-form-item label="下一步计划" prop="nextStep"> <el-input v-model="form.nextStep" type="textarea" placeholder="请输入内容" /> </el-form-item> <el-form-item label="经验教训" prop="lessonLearn"> <el-input v-model="form.lessonLearn" placeholder="请输入经验教训" /> </el-form-item> <el-form-item label="记录时间" prop="recordDate"> <el-date-picker clearable v-model="form.recordDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择记录时间"> </el-date-picker> </el-form-item> <el-form-item label="纸质记录" prop="paperRecord"> <el-input v-model="form.paperRecord" placeholder="请输入纸质记录，这里填写上传文件名，上传后双击可以打开" /> </el-form-item> <el-form-item label="记录上传服务器地址" prop="recordAdrees"> <el-input v-model="form.recordAdrees" placeholder="请输入记录上传服务器地址，" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template>添加 loadPotoa: null, loadPotob: null, loadPotoc: null, loadPotod: null, loadPotoe: null, loadPotof: null,存储图片
10-11
我们之前的对话历史是关于SQL插入错误的解决方案，现在用户的新问题是在Vue和Element UI的对话框表单中添加多个图片存储变量。 用户要求：在对话框表单代码中添加 loadPotoa 到 loadPotof 共6个变量（null初始值）...
<el-form-item>设置长宽,字体大小
06-15
我们正在使用ElementUI的el-form-item组件，并希望设置其宽度、高度和字体大小。根据引用[1]中的经验，直接设置高度可能会导致内部元素换行时格式错乱，因此需要谨慎。同时，引用[1]和引用[3]提供了一些样式覆盖的...
elform-item动态prop
carbonzhao的专栏
11-07 4724
页面中显示的东西，完全是自定义组合的而不是固定的，所以此时的elform的普通prop验证已经不能满足于我们的开发要求，那如何处理呢？而针对el-from-item的prop指定就显示的尤其特别，prop为空，则意味着不需要验证，不为空则意味着需要验证！最后一步则简单多了，实现rules方法进行验证即可，我们是行间实现验证规则，你也可以参考下面的函数中验证规则，均可。可以看到，对于el-from的使用仍然是能用的规则，给他定义ref，给他定义动态的model!('请选择CRF模板'));
el-form-item表单label添加提示图标
小马甲
10-08 5192
element-ui中el-form在编辑表单时，经常会在label添加一些需要提示的东西，可以用到Form-Item 的slot这个方法。
element-plus中 阻止el-form-item点击label也触发表单控件的事件
Juihui822的博客
08-06 1111
如图：想要点击车型和编号时，不触发点击事件，在样式中加如下代码：
对el-form-item使用slot进行某个字的超链接页面跳转
weixin_43914278的博客
04-11 2473
核心功能需要实现"构"字可跳转到登录页面，核心方法使用插槽实现 <el-form-item> <div slot="label"> <span>机</span> <span @click="$router.push({ name: 'login' })">构</span> <span>名称</span>
element-plus表单为什么点击label标签，表单控件也会响应
xiaomaerc的博客
03-27 1653
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。若想点击label标签，表单控件不进行响应，可在使用FormItem的for属性进行修改label标签原生的for属性。这是因为label标签的“for”属性表单控件“id”绑定了相同的值。
Vue+ElementUI 将表单做成组件公用，添加slot方法便于外部添加其他
weixin_45701630的博客
08-15 4062
整体思路：子组件中正常创建表单，父组件调用时，在插槽中添加el-form-item，将所有的v-model统一存在一个对象中，通过props传递给子组件，在每个item中写好rules，在各个控件中写入:validate-event="false"（因为在表单验证的时候会有些问题出现，所以这里采用统一的点击按钮后进行验证），最后在子组件即将提交表单时将数据合并，完成验证后传给后台。多个界面内容展示类似，都需要提交相同的表单，为方便之后的需求变更，通过插槽可以添加新的表单项。...
表单el-form-item自定义label
weixin_52862941的博客
12-02 2345
核心用的是 slot='label'
Element Plus 取消el-form-item点击触发组件，改为原生表单控件
zhujiyan666的博客
09-13 960
【代码】Element Plus 取消el-form-item点击触发组件，改为原生表单控件。
el-form 有数据表单验证没通过
最新发布
10-25
<think>我们正在处理的问题是：el-form 表单中有数据，但是表单验证不通过的情况。根据引用 [1] 和引用 [2] 的内容，我们可以了解到一些关于 el-form 表单验证的信息。 引用 [1] 提到： - 当输入内容改变元素的值后，会触发 el-form-item 的 change 或 blur 事件，然后触发表单校验。 - 解决方案之一是给 el-form-item 绑定 ref。 引用 [2] 提到： - 表单验证通常使用 `this.$refs[formName].validate` 方法。 - 在提交表单时，会调用 validate 方法，该方法会返回一个布尔值，表示所有表单验证是否通过。 根据这些信息，我们可以分析出，表单有数据但验证不通过，可能是以下原因导致的： 1. **验证规则（rules）设置问题**：规则可能过于严格，或者规则的条件设置不正确。 2. **数据格式问题**：表单绑定的数据格式与验证规则期望的格式不一致。 3. **触发校验的时机问题**：可能在数据变化后没有触发校验，或者触发了但校验未完成。 4. **表单字段与prop属性不一致**：el-form-item 的 prop 属性必须与 rules 中的字段名和绑定数据中的字段名一致。 5. **异步验证问题**：如果使用了异步验证，可能在验证完成前就提交了表单。 接下来，我们提供解决方案： ### 解决方案步骤： 1. **检查验证规则（rules）**： 确保规则设置正确，例如，如果要求输入数字，则规则中的 type 应为 'number'；如果要求必填，则 required 为 true，并给出 message。 ```javascript rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], age: [ { type: 'number', message: '年龄必须为数字值' } ] } ``` 注意：如果表单绑定的是数字类型，而输入框默认是字符串类型，需要进行转换（例如使用 `.number` 修饰符）或规则中处理。 2. **确保 prop 属性与字段名一致**： 每个 `el-form-item` 的 `prop` 属性必须与 `v-model` 绑定的字段名以及 `rules` 中的字段名完全一致。 ```html <el-form :model="form" :rules="rules" ref="ruleForm"> <el-form-item label="姓名" prop="name"> <!-- prop 为 "name" --> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> ``` 3. **手动触发验证**： 如果自动触发验证没有执行，可以在数据改变后手动触发验证。 - 对整个表单字段进行验证：`this.$refs[formRef].validate()` - 对单个字段进行验证：`this.$refs[formRef].validateField(fieldName)` 4. **检查异步验证**： 如果使用了异步验证，确保在验证完成后再进行提交。可以使用 Promise 或 async/await 处理。 ```javascript async submitForm(formName) { try { const valid = await this.$refs[formName].validate(); if (valid) { // 提交表单 } } catch (error) { console.log('验证失败', error); } } ``` 5. **使用 $set 确保数据响应式**： 如果表单数据是动态添加的，可能需要使用 `this.$set` 来确保数据是响应式的，这样验证才能正确触发。 ```javascript // 错误：直接添加属性 this.form.newField = 'value'; // 正确：使用 $set this.$set(this.form, 'newField', 'value'); ``` 6. **检查表单重置问题**： 如果使用了表单重置，注意重置操作可能会将字段重置为空，然后在后续操作中再次赋值，但验证状态可能没有更新。这时可以尝试在赋值后调用 `clearValidate` 清除验证状态，再重新触发验证。 ```javascript this.form.name = 'new value'; this.$nextTick(() => { this.$refs.ruleForm.clearValidate('name'); // 清除单个字段的验证 // 或者清除整个表单的验证：this.$refs.ruleForm.clearValidate(); }); ``` 7. **查看控制台错误**： 检查控制台是否有报错，比如 prop 设置的字段在 rules 中未定义，或者字段名拼写错误等。 ### 示例代码： ```vue <template> <el-form :model="form" :rules="rules" ref="ruleForm"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item> <el-button @click="submitForm('ruleForm')">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: '' }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } } }; </script> ``` 如果按照以上步骤检查仍然无法解决问题，可以考虑提供更具体的代码示例以便进一步分析。 §§相关问题§§ 1. Element UI 表单验证规则有哪些常用类型？ 2. 如何在 Vue 中动态添加表单验证规则？ 3. el-form 表单验证失败时如何定位错误字段？ 4. 如何自定义表单验证方法？ 5. 表单验证时如何处理异步校验（如请求接口验证）？ [^1]: el-form-item 事件触发机制 [^2]: el-form 的 validate 方法使用 </think>### el-form 有数据但表单验证不通过的解决方案 根据引用内容，表单验证不通过通常由以下原因导致： 1. **验证规则冲突**：规则定义与数据格式不匹配（例如数字类型验证字符串）[^1] 2. **prop绑定错误**：`el-form-item`的prop属性与`v-model`字段不一致[^1] 3. **验证时机问题**：数据更新后未触发重新验证[^2] 4. **异步数据延迟**：数据加载完成后未重置验证状态[^2] #### 解决方案步骤： ##### 1. 检查验证规则定义 ```javascript rules: { username: [ // 常见错误：数字类型验证字符串输入 { type: 'number' }, // ❌ 错误（输入框默认返回字符串） { type: 'string', required: true } // ✅ 正确 ], file: [ // 文件上传特殊处理 { validator: checkFile, trigger: 'change' } // 引用[2] ] } ``` ##### 2. 确保prop绑定一致性 ```html <el-form :model="formData"> <!-- 正确：prop与model字段完全对应 --> <el-form-item prop="email" label="邮箱"> <el-input v-model="formData.email"/> <!-- 双向绑定字段 --> </el-form-item> <!-- 错误示例 ❌ --> <el-form-item prop="userEmail"> <!-- 命名不一致 --> <el-input v-model="formData.email"/> </el-form-item> </el-form> ``` ##### 3. 手动触发验证更新 ```javascript // 数据更新后重置验证 this.$nextTick(() => { this.$refs.formRef.clearValidate(); // 清除全部验证状态 this.$refs.formRef.validateField('fieldName'); // 重新验证特定字段 引用[1] }); // 提交时强制验证 submitForm() { this.$refs.formRef.validate(valid => { if (valid) { /* 提交操作 */ } // 引用[2] }) } ``` ##### 4. 异步数据处理方案 ```javascript // 数据加载完成后重置表单 axios.get('/api/data').then(res => { this.formData = res.data; this.$nextTick(() => { this.$refs.formRef.clearValidate(); // 关键步骤！ }); }); ``` ##### 5. 自定义验证规则示例 ```javascript const checkFile = (rule, file, callback) => { if (!file) { callback(new Error('请上传文件')); } else if (file.size > 1024 * 1024) { callback(new Error('文件大小超过1MB')); } else { callback(); // 验证通过 } } // 规则配置 rules: { attachment: { validator: checkFile, trigger: 'change' } } ``` #### 完整示例代码 ```vue <template> <el-form :model="form" :rules="rules" ref="formRef"> <el-form-item prop="name" label="名称"> <el-input v-model="form.name"/> </el-form-item> <el-form-item prop="file" label="文件"> <el-upload :on-change="handleFileChange"> <!-- 引用[2] --> <el-button>选择文件</el-button> </el-upload> </el-form-item> <el-button @click="submit">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { name: '', file: null }, rules: { name: [{ required: true, message: '名称必填', trigger: 'blur' }], file: [{ validator: this.checkFile, trigger: 'change' }] } } }, methods: { handleFileChange(file) { this.form.file = file.raw; this.$refs.formRef.validateField('file'); // 手动触发验证 }, checkFile(rule, value, callback) { if (!value) callback(new Error('请选择文件')); else callback(); }, submit() { this.$refs.formRef.validate(valid => { if (valid) console.log('验证通过'); }); } } } </script> ``` #### 调试技巧： 1. 使用`this.$refs.formRef.fields`查看所有字段验证状态 2. 在浏览器控制台检查字段的`validateState`属性（validating/success/error） 3. 对复杂字段使用`:error="customError"`手动设置错误状态 > **关键点说明**： > - **prop绑定**必须与`v-model`字段完全一致（大小写敏感）[^1] > - 文件上传等特殊组件需要**手动触发验证**[^2] > - 异步数据加载后必须调用`clearValidate()`重置状态[^1] > - 使用`validateField()`可针对性重验问题字段[^1]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值