Vue Elementui 表单必填项和非必填项label文字对齐的简单方式

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>