el-row + el-form表单里的item项样式错位

最新推荐文章于 2024-03-12 11:37:51 发布
最新推荐文章于 2024-03-12 11:37:51 发布
阅读量1k 收藏 3
点赞数 2
分类专栏： ui element ui vue 文章标签： 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010328533/article/details/128797122
版权
vue 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
element ui
4 篇文章 0 订阅
订阅专栏
ui
3 篇文章 0 订阅
订阅专栏

现象:
在这里插入图片描述
解决方式:
在这里插入图片描述
在这里插入图片描述

图拉呀
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-centro+taft.zip_El Centro 地震波_El Centro地震。_el-centro+taft_taf
07-15
地震波官方数据 taft波 el-centro波加速度时程曲线
Vue+element ，el-form 中加el-col或el-row布局，无法获得光标
热门推荐
weixin_39308542的博客
05-21 2万+
在一个Vue+element 的项目中做表单操作，加入el-col后出现了，输入框点击无效的情况 <div id="app"> <el-form ref="form" :model="form" label-width="80px"> <el-col :span="12"> <el-form-item label=...
ElementUI中使用＜el-row＞自适应布局导致显示错乱
Sophia的博客
05-11 2459
ElementUI中使用自适应布局导致显示错乱(后端获取数据for循环)
el-form表单结合el-row循环数组，动态添加prop，最后进行表单验证
最新发布
MtangEr的博客
03-12 512
el-form表单结合el-row循环数组，动态添加prop，最后进行表单验证
el-form-item 设置标签长度
weixin_35749796的博客
01-10 2369
el-form-item 是 element-ui 中的一个组件，用于表单项的布局。可以使用 label-width 属性来设置标签的长度，例如： <el-form-item label="标签文字" label-width="100px"> <el-input v-model="input"></el-input> </el-form-item&gt...
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
安装 element组件
Connie_wuxx的博客
11-22 484
element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。
Vue使用ElementUi表单多级级联时引发的表单错乱问题，闹心的Bug哪都有，这个最烦人
04-12 1616
其实这个问题出现的场景还是挺费心思的，因为业务需要，我们有一个多级表单的场景，而且某个表单可能会级联另一个表单域的出现或隐藏，而且我还使用了v-if判断....这就是最糟心的地方，大部分是因为v-if引起的表单错乱........我们的表单域样式：表单域代码：下面是基本上修好了，将v-if替换为v-show就好了大部分了： 出现问题的样式：当我选择OPRF的时候，就会出现级联关系，并且触发表单校验，这是有问题的时候样式，代码我就不贴了： 1.当使用过级联关系后的表单，点击取消之后，再次单击创建任务，表单
2、最完整版的Element表格二次封装
伦伦的博客
07-28 1400
1. 封装好的子组件表格代码 <template> <!-- width: 100%; height: 100%---取父组件div的高度以及宽度 --> <div class="v-table" ref="tableheight" style="width: 100%; height: 100%"> <el-table ref="table" :header-cell-style="hea
element-ui中的表格与表单混用方法及表单校验
一家外包公司的码农，专职前端开发
04-02 1851
效果图 只是简单写一个样式和使用方法，剩下的可以按照自己所学的知识进行扩展！ <template> <div> <el-container> <el-header> <el-row> <el-form :model="tableData" :rules="tableData.Rules" ref="tableData"> &lt.
element form表单组件二次封装
皮皮的博客
10-19 378
element form表单组件二次封装
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element-UI 使用el-row 分栏布局的教程
01-18
使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，el-container 布局就满足了需求了，就要用到el-row 布局做分栏处理， 代码如下 <div slot=header
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
compat-libstdc++-33-3.2.3-69.el6.x86_64.rar
09-28
compat-libstdc++-33-3.2.3-69.el6.x86_64
form表单中使用el-row布局 input表单与父元素不同宽
A_Common_Man的博客
06-14 748
form表单中使用el-row布局 时 input表单与父元素不同宽 ， 导致缩放页面的时候不能响应式布局
element-ui 动态表单实现一行两列
m0_67273584的博客
08-11 2396
参考element-ui的文档,再用el-row与el-col相结合实现动态表单一行两列功能
实现el-form一行中多个el-form-item
JonyM的博客
05-09 5213
el-form-item默认一个占一行，利用el-row和el-col实现一行中多个。 注意：中的12是一个占据的列数，默认一列总共24列，通过调整这个数字，可以调整不同列的宽度。 如果只使用el-col，不在外面套el-row，会造成表格不能编辑。 ...
el-form + el-table,表格各单元格内嵌el-form-item项，怎么添加校验
06-06
要在el-form + el-table中每个单元格内嵌el-form-item项，并且需要添加校验功能，可以按照以下步骤操作： 1. 在el-form-item中添加需要校验的表单控件，如el-input、el-select等。 2. 在el-form-item中添加校验规则，可以通过rules属性来添加校验规则，如： ``` <el-form-item prop="name" label="姓名" :rules="nameRules"> <el-input v-model="form.name"></el-input> </el-form-item> ``` 在data中定义nameRules数组对象： ``` data() { return { form: { name: '' }, nameRules: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' } ] } } ``` 这里定义了两个校验规则，第一个规则要求该字段不能为空，第二个规则要求该字段长度在2到10个字符之间。 3. 在el-table中添加slot-scope，用于获取每个单元格的数据。如： ``` <el-table :data="tableData"> <el-table-column label="姓名"> <template slot-scope="{ row }"> <el-form-item prop="name" :rules="nameRules"> <el-input v-model="row.name"></el-input> </el-form-item> </template> </el-table-column> </el-table> ``` 这里通过slot-scope获取到每个单元格的数据，并将数据绑定到el-input中。同时在el-form-item中添加了校验规则。 4. 在methods中定义表单提交的方法，并调用el-form的validate方法对表单进行校验。如： ``` methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过，提交表单 } else { // 校验不通过，提示错误信息 } }); } } ``` 这里通过this.$refs.form.validate方法对表单进行校验，如果校验通过，则提交表单；如果校验不通过，则提示错误信息。 以上就是在el-form + el-table中添加校验的方法，希望能够帮到你。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值