VUE-Element组件（九）Form表单

w_t_y_y

已于 2022-06-21 16:01:59 修改

阅读量990

点赞数

分类专栏： # VUE页面开发文章标签： vue.js elementui 前端

于 2021-04-27 11:40:59 首次发布

本文链接：https://blog.youkuaiyun.com/w_t_y_y/article/details/116197307

版权

VUE页面开发专栏收录该内容

26 篇文章

订阅专栏

本文介绍了前端开发中关于表单的几个关键点：如何使用slot让label加空格生效，展示了一个数据校验的例子，以及如何在el-form-item中添加红色星号来标记必填项。此外，还特别提到了当label-width设置为auto时可能出现的布局问题，并给出了修复方法，通过调整内联样式解决内容错位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、label加空格：直接使用 是不生效的，需要加slot插槽：

<el-form-item>
                  <label slot="label">&nbsp;</label>
                  <el-button @click="getList" size="mini" type="primary">搜索</el-button>
                </el-form-item>

二、数据校验：form表单数据校验：如对userName字段的必填、长度、格式校验

 rules: {
  userName: [
          { required: true, message: '名称不得为空', trigger: 'blur' },
          {
            pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_]{1,40}$/,
            message: '角色名称由中文,字母，数字不超过40个字符',
            trigger: 'blur'
          },
          { max: 40, message: '姓名长度超过40', trigger: 'blur' }
        ]
}

三、form表单el-form-item 添加红色星号：两种方法：

1、如果不需要做任何校验（必填校验、规则校验等等），仅仅是排版需要，只需添加 :required=“true”，如：

 <el-form-item label="姓名："  :required="true" />

2、需要做校验（必填校验、规则校验等等）：通过 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需校验的字段名即可。

三、label-width设置为auto的坑：

1、label与内容换行了：

选择一个日期后显示又正常了

对比发现：

错位的：

正常的：

所以给这个内联样式设置margin-left即可

/deep/ .el-form-item__content {
  margin-left: 110px !important;
}