How to set the first el-input in el-form-item to have red asterisk behind

<el-form-item
        v-for="(email, index) in noticeEmail"
        :label="'通知邮箱' "
        :key="email.key"
        :rules="index === 0 ?{
          required: true, message: '通知邮箱不能为空', trigger: 'blur'
        }: null"
      >
        <!-- <el-input v-model.trim="email.value" @blur="trim(email.value)"></el-input> -->
        <el-input v-model.trim="email.value" @blur="email.value = email.value.replace(/[\s\uFEFF]+/g, '')"></el-input>
        <!-- <el-input v-model="email"></el-input> -->
        <el-button @click.prevent="removeEmail(email)" v-show="index>=1"
          >删除</el-button
        >
      </el-form-item>

ask:

<el-form-item

v-for="(email, index) in noticeEmail"

:label="'Notification Email'"

:key="email.key"

:rules="index === 0 ?{

required: true, message: 'Notification mailbox cannot be empty', trigger: 'blur'

}: null"

>

<!-- <el-input v-model.trim="email.value" @blur="trim(email.value)"></el-input> -->

<el-input v-model.trim="email.value" @blur="email.value = email.value.replace(/[\s\uFEFF]+/g, '')"></el-input>

<!-- <el-input v-model="email"></el-input> -->

<el-button @click.prevent="removeEmail(email)" v-show="index>=1"

>Delete</el-button

>

</el-form-item> Please change the above code to: only the first one has a red asterisk for verification, and the following ones will no longer have red asterisks, no more verification, please write code

answer:

Different checksum flags can be implemented el-form-itemin via conditional rendering. v-ifThe specific implementation method is as follows:

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item
      v-for="(email, index) in noticeEmail"
      :label="'通知邮箱' "
      :key="email.key"
      :prop="index === 0 ? 'noticeEmail' : null"
      :rules="index === 0 ? { required: true, message: '通知邮箱不能为空', trigger: 'blur' } : null"
    >
      <el-input v-model.trim="email.value" @blur="email.value = email.value.replace(/[\s\uFEFF]+/g, '')"></el-input>
      <el-button @click.prevent="removeEmail(email)" v-show="index >= 1">删除</el-button>
      <span class="el-form-item__required" v-if="index === 0">*</span>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        noticeEmail: [{ key: 1, value: '' }],
      },
      rules: {
        noticeEmail: [{ required: true, message: '通知邮箱不能为空', trigger: 'blur' }],
      },
    };
  },
  computed: {
    noticeEmail() {
      return this.form.noticeEmail;
    },
  },
  methods: {
    removeEmail(email) {
      const index = this.noticeEmail.indexOf(email);
      if (index !== -1 && this.noticeEmail.length > 1) {
        this.noticeEmail.splice(index, 1);
      }
    },
  },
};
</script>

Key point: the above: rules judge the index

Effect: There is no red asterisk in the input box after clicking Add Email