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>