el-form-item中如何设置第一个el-input有红色星号后面的没有

<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>

问：

<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>上面的代码请更改成：只有第一个有红色的星号进行校验，后面的就不再有红色的星号，不再校验了，请写代码

回答：

可以在 el-form-item 中通过 v-if 条件渲染来实现不同的校验和标记。具体实现方法如下：

<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>

重点：上面的 :rules进行了index的判断

效果：点击添加邮箱后的输入框不再有红色星号