效果图：
核心代码（使用 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>