1. 不好的方式 很长时间以来都是用改写form-item样式来使得必填项和非必填项保证label对齐,这样需要改写系统样式,还要在相应的item上引用,代码量增多,示例如下(不推荐)
<template>
<el-form-item prop="name" label="名称" class="form-item-require-lable"/>
</template>
<style lang="scss">
.form-item-require-lable {
.el-form-item__label:before {
content: "*";
color: #f56c6c;
margin-right: 5px;
font-weight: bold;
}
}
.form-item-normal-lable {
.el-form-item__label:before {
content: "";
margin-right: 12px;
font-weight: bold;
}
}
</style>
2. 好的方式 利用 slot轻松搞定,可以在slot所在的div里设置样式.
<template>
<el-form-item prop="name">
<div slot="label" style="margin-left:10px;">名称</div>
<el-input v-model="form.name" placeholder="请输入名称"></el-input>
</el-form-item>
</template>