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

Element UI 中的 el-form 表单组件默认是在输入框旁边显示验证信息的，如果需要修改星号（表示必填项的标记）的位置，可以通过CSS覆盖默认样式来实现。

以下是一个简单的例子，展示如何通过CSS将星号移动到字段标签的右侧：

<template>
  <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: ''
      }
    };
  }
};
</script>
 
<style scoped>
/* 将星号添加到label的右侧 */
.el-form-item__label:after {
  content: ' *';
  color: red;
  margin-left: 0.5em;
}
 
/* 隐藏原来的星号 */
.el-form-item__label .optional {
  display: none;
}
</style>

在这个例子中，CSS规则 .el-form-item__label:after 用于添加一个新的星号，并通过 content 属性指定星号的内容。.optional 类隐藏了原来的星号。你可以根据需要调整 margin-left 的值来改变星号相对于标签的位置。