Vue + elementui simple manner and form required non-mandatory label text alignment

1. bad way has long been used to rewrite form-item style to make the required and optional warranty label alignment, so that the system needs to be rewritten style, but also references to the corresponding item, increase the amount of code , the following examples (not recommended)

<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. A good way to use slot easy to get, you can set the style in a div slot is located inside.

<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>