el-form label加星号*

1、伪元素添加

el-form label后加星号

    .device-form    .el-form-item__label::after{
    
    
        content: "*";
        color: #1A1A1A;
        margin-left: 5px;
        font-size: 16px;//改变星号的大小
}

效果

el-form label前加星号

    .device-form    .el-form-item__label::before{
    
    
        content: "*";
        color: #1A1A1A;
        margin-left: 5px;
        font-size: 16px;//改变星号的大小
}

2、elementui Form 组件自带的表单验证功能

这是有验证输入框的，必须填，否则表单验证不通过，没法下一步操作

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  
</el-form>
<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        ruleForm: {
    
    
          name: '',
        },
        rules: {
    
    
          name: [
            {
    
     required: true, message: '请输入活动名称', trigger: 'blur' },//必填
            
          ]
        }
      };
    },
    methods: {
    
    
    }
  }
</script>

3、只是加星号 不验证

 <el-form-item label="活动名称" :required="true" >
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>