动态表单的下拉菜单筛选过滤实现: 上一层选中的属性,在下一个下拉菜单不显示

466 阅读1分钟

需求:表单conditions项为动态增减项,且至少保留一项;在新增配置时,已被选中的值,在后续配置中不做展示;删除配置时,将被删除的这一项恢复显示。
说明:被选中的值,在当前项要可见 image.png

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>