Vue Elementui 表单必填项和非必填项label文字对齐（左对齐）

开始的时候尝试的写行内样式，但是会导致验证提示左移下面是我使用的方法表单项放在一个div中,修改对应类的样式::v-deep的作用自己百度写法可能不一样，思路如此<div class="requiredBox"><el-form-item></el-form-item><el-form-item></el-form-item><el

向前跑丶加油

2727人浏览 · 2021-12-09 11:02:19

向前跑丶加油 · 2021-12-09 11:02:19 发布

开始的时候尝试的写行内样式，但是会导致验证提示左移
在这里插入图片描述
下面是我使用的方法
表单项放在一个div中,修改对应类的样式
::v-deep的作用自己百度写法可能不一样，思路如此

 <div class="requiredBox">
    <el-form-item>
    </el-form-item>
    <el-form-item>
    </el-form-item>
    <el-form-item>
    </el-form-item>
 </div>

<style lang="scss" scoped>
.requiredBox {
  ::v-deep .el-form-item__label {
    transform: translateX(-10px);
  }
}
</style>

修改后的效果
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^