需求:表单conditions项为动态增减项,且至少保留一项;在新增配置时,已被选中的值,在后续配置中不做展示;删除配置时,将被删除的这一项恢复显示。
说明:被选中的值,在当前项要可见
const addConfig = () => {
// 下拉菜单复制添加
configOptions.type.push(_.cloneDeep(conditionList.type))
// 对下拉菜单数据处理
filterOptions()
}
const filterOptions = () => {
const selectedType = [] // 存放conditions中已经被选中的值
// 遍历表单配置项
configForm.conditions.forEach((el, index) => {
selectedType.push(el.type)
if (!data[index]) {
data.push(_.cloneDeep(conditionList.type))
}
})
// 特定情况下 下拉菜单某些值不做展示
const ignoreGoalTarget = ['account', 'application', 'campaign']
// configOptions.type: Array 存放表单下拉菜单数据
configOptions.type?.forEach(options => {
options.forEach(item => {
if (selectedType.includes(item.value)) {
item.disabled = true
} else {
item.disabled = false
}
/* 具有绝对优先级
* account、campaign、application不可以选cpaGoal
* DISPLAY 也不可以选 CPA_GOAL
* */
if (type === 'conditions' && item.value === 'CPA_GOAL') {
if (ignoreGoalTarget.includes(filterData.target) || filterData.adPlacement === 'DISPLAY') {
item.disabled = true
}
}
})
})
}
<h3 class="title">{{ $t('automations.conditionsMet') }}:</h3>
<!-- 遍历 -->
<template
v-for="(elem, index) in configForm.conditions"
:key="elem.type"
>
<el-row v-if="elem" class="filter-item">
<el-form-item
label-width="0"
label=""
class="item"
:prop="'conditions[' + index + ']' + '.type'"
:rules="[{ required: true, message: 'type is required', trigger: 'change'}]"
>
<el-select
v-model="elem.type"
placeholder="select type"
filterable
class="large"
@change="changeType(configOptions.type, $event, 'conditions', elem)"
>
<template v-for="(item, innerIndex) in configOptions['type'][index]" :key="innerIndex">
<!-- 只有disabled为false 或 且当前选项值在下拉菜单中匹配上的选项作展示 -->
<el-option
v-show="!item.disabled || item.value === elem.type"
:label="$t('automations.' + item.name)"
:value="item.value"
:disabled="item.disabled"
/>
</template>
</el-select>
</el-form-item>
</el-row>
</template>
</div>