vue3中el-form表单如何在label前设置必填星号

在Vue 3中，使用Element UI (简称`ElForm`)构建表单时，要在`<label>`标签前面添加必填星号(*)通常是在模板上稍微做点自定义样式处理。你可以通过HTML模板直接插入一个图标，或者使用计算属性动态插入。这里提供一个简单示例：

<template>
  <el-form label-width="80px">
    <el-form-item label="* 姓名" prop="name">
      <input v-model="form.name" type="text" placeholder="请输入姓名" required />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      form: {
        name: ''
      }
    };
  },
});
</script>

<style scoped>
.el-form__label::before {
  content: '*';
  margin-right: 5px;
}
</style>

在这个例子中，我们在每个必填字段的`<label>`标签之前添加了一个CSS样式，`.el-form__label::before`选择器用于定位到`label`元素并在其开始位置插入内容。如果需要更复杂的设计，例如使用字体图标库，可以引入相应的图标并替换CSS里的`content`。