修改 elementUI 中 el-form 表单组件的星号位置

此方法并不局限于星号的处理，也可以用于其它样式的处理

首先通过F12的控制台知道element的表单星号是通过伪类控制的，那么问题就简单了。

方法有多种
比方说关闭element原生的星号显示，自己做一个星号标签
比方说用deep来作于标签，修改属性
等等

如果说我的星号并不是一直显示，而是要根据某些表单的字段的值的改变而改变是否展示星号时，那么上述方法就要额外的处理自己的标签，太过繁琐，量太大了

我的方法
在vue的main.js中引入一个公共样式

import Vue from 'vue'

import Cookies from 'js-cookie'

import Element from 'element-ui'
import './assets/styles/my-element.scss'  //此处

然后根据路径创建好my-element.scss文件
在顶部引入element的样式文件
element-ui/packages/theme-chalk/src/index
此处的路径你可以通过node_modules下找到

$--color-danger: #ff4949;
//可以通过路径看到element原生样式
@import "~element-ui/packages/theme-chalk/src/index"

@include b(form-item) {
  @include when(required) {
    @include pseudo('not(.is-no-asterisk)') {

      &>.el-form-item__label:after,
      & .el-form-item__label-wrap>.el-form-item__label:after {
        content: '*';
        color: $--color-danger;
        margin-left: 4px;
      }
      
      &>.el-form-item__label:before,
      & .el-form-item__label-wrap>.el-form-item__label:before {
        display: none !important;
      }

    }
  }
}

after伪类就是我想要的，在文本后面添加星号。而before是element原生的则给他隐藏。这样，就无需做其它的额外操作，上述的特殊情况下的星号的显示与隐藏也用额外处理