给表单项添加必填星号

问题

表单校验是否必填，会给表单使用 rules 属性，传入校验规则，如下所示：

        <el-form
          :model="form"
          :rules="rules"
        >
	</el-form>

---

如果是必填的，则在校验规则中添加 required: true，如下所示。

  data() {
    return {
      rules: {
        pid: [
          {
            required: true,
            message: "请选择上级节点",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },

并且表单项前会有星号提示必填：

---

如果在某些情况下才必填，则校验规则中可传入校验函数，如下所示：

  data() {
    var validateMajor = (rule, value, callback) => {
      if (this.form.type == 4 && !value) {
        callback(new Error(`请选择专业`));
      } else {
        callback();
      }
    };
    return {
      rules: {
        major: [{ validator: validateMajor, trigger: ["blur", "change"] }],
      },
    };
  },

但是上述代码不会给表单项前添加星号。

解决

给表单项添加 required 属性，则会添加星号。

如下所示，表示只在满足条件时才显示星号：

            <el-form-item
              label="专业"
              prop="major"
              v-show="form.type == 4"
              :required="form.type == 4"
            >
            </el-form-item>

参考链接

element form如何在 label 前面添加必填 红星 ※而不加验证