＜script setup lang=“ts“＞+element-plus模拟required 展示星号*且不触发 Element UI 的校验规则

效果图：

核心代码（使用 template #label 插槽：自定义 label 内容，添加红色星号）：

<template>
    <div>
        <Dialog
            :modelValue="modelValue"
            width="66%"
            title="banner管理"
            @confirm="confirm(ruleFormRef)"
            @cancel="cancel(ruleFormRef)"
            :before-close="beforeClose"
            :destroy-on-close="true"
        >
            <el-tabs v-model="bannerName" class="demo-tabs">
                <el-form :model="formInline" class="demo-form-inline" ref="ruleFormRef">
                    <!-- 核心：添加拖拽容器 -->
                    <draggable
                        v-model="formInline.bannerList"
                        class="draggable-container"
                        ghost-class="ghost"
                        @end="onDragEnd"
                        item-key="id"
                    >
                        <template #item="{ element: banner, index }">
                            <el-form-item :key="banner.id || index" class="space-between dialog-item-bg draggable-item">
                                <!-- 拖拽提示（可选） -->
                                <div
                                    style="
                                        width: 100%;
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                    "
                                >
                                    <div class="draggable-btn"
                                        ><Icon class="avatar-uploader-icon" icon="ep:sort" :size="14" />
                                        拖拽改变顺序</div
                                    >
                                    <div class="sort-num"> {{ index + 1 < 10 ? `0${index + 1}` : index + 1 }}</div>
                                </div>

                                <div class="flex-between form-cont">
                                    <el-form-item
                                        label-width="140px"
                                        class="custom-clear-btn image"
                                    >
                                        <template #label>
                                            <span class="required-label">banner{{ index + 1 }}图片：</span>
                                        </template>
                                        <UploadImg
                                            v-model="banner.imgUrl"
                                            module-name="banner"
                                            :descriptions="[
                                                '图片格式：jpg, png, gif, jpeg 等格式均可',
                                                '图片尺寸：1005px * 480px',
                                                '图片大小：(不超过10M)'
                                            ]"
                                            :allow-file-size="10"
                                            :allow-scale="{
                                                width: 1005,
                                                height: 480,
                                                widthLimitType: 'eq',
                                                heightLimitType: 'eq',
                                                multiple: []
                                            }"
                                        />
                                    </el-form-item>

                                    <div class="input-cont-box">
                                        <el-form-item 
                                            label-width="120px" 
                                            class="custom-clear-btn"
                                        >
                                            <template #label>
                                                <span class="required-label">所属区域：</span>
                                            </template>
                                            <el-select
                                                class="input-width"
                                                v-model="banner.areaConfId"
                                                @change="handleClickAreaConfIdChange(index)"
                                            >
                                                <el-option
                                                    v-for="(opt, optIndex) in areaOptions"
                                                    :key="optIndex"
                                                    :label="opt.label"
                                                    :value="parseInt(opt.value)"
                                                />
                                            </el-select>
                                        </el-form-item>

                                        <el-form-item
                                            label-width="120px"
                                            class="custom-clear-btn area-input"
                                        >
                                            <template #label>
                                                <span class="required-label">链接类型：</span>
                                            </template>
                                            <el-select
                                                class="input-width"
                                                v-model="banner.clickEventType"
                                                @change="handleClickEventTypeChange(index)"
                                            >
                                                <el-option :label="'文章'" :value="1" />
                                                <el-option :label="'活动'" :value="2" />
                                                <el-option :label="'商品'" :value="3" />
                                            </el-select>
                                        </el-form-item>

                                        <el-form-item
                                            label-width="120px"
                                            v-if="banner.clickEventType == '1'"
                                        >
                                            <template #label>
                                                <span class="required-label">文章ID：</span>
                                            </template>
                                            <el-input
                                                class="input-width"
                                                v-model="banner.name.clickUrl"
                                                show-word-limit
                                                maxlength="1024"
                                            />
                                        </el-form-item>

                                        <el-form-item
                                            label-width="120px"
                                            v-if="banner.clickEventType == '2'"
                                        >
                                            <template #label>
                                                <span class="required-label">活动类型：</span>
                                            </template>
                                            <el-select v-model="banner.name.clickUrl" class="input-width">
                                                <el-option
                                                    v-for="idx in activeActivityList"
                                                    :key="idx.clickUrl"
                                                    :label="idx.name"
                                                    :value="idx.clickUrl"
                                                />
                                            </el-select>
                                        </el-form-item>

                                        <el-form-item
                                            label-width="120px"
                                            v-if="banner.clickEventType == '3'"
                                        >
                                            <template #label>
                                                <span class="required-label">商品：</span>
                                            </template>
                                            <SearchCommon
                                                :type="searchType"
                                                :model-value="banner.name"
                                                :alias-options="{ label: 'name', value: 'clickUrl' }"
                                                :api="qryAllActiveGoodsPage"
                                                :areaConfId="banner.areaConfId"
                                                dialogWidth="950px"
                                                leftWidth="600px"
                                                :isRadio="true"
                                                :disabled="!banner.areaConfId"
                                                @change="(val) => changeGoodsId(val, index)"
                                                class="input-width"
                                            />
                                        </el-form-item>
                                    </div>

                                    <div class="button-box">
                                        <div>
                                            <el-button class="button-style" type="primary" @click="addAdvertisement">
                                                新增
                                            </el-button>
                                        </div>
                                        <div>
                                            <el-button
                                                type="danger"
                                                style="margin-left: 0; margin-top: 12px"
                                                class="button-style"
                                                @click="clearRow(index)"
                                                v-if="index != 0"
                                            >
                                                删除
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                        </template>
                    </draggable>
                </el-form>
            </el-tabs>
        </Dialog>
    </div>
</template>

<style scoped>
/* 只在label前添加红色星号，不触发校验 */
.required-label::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
}
</style>