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>